延迟加载滚动图片和“进入视图”

我使用Lazy作为惰性图片加载插件。我有一个div，我加载的div像这样：延迟加载滚动图片和“进入视图”

<div class="nano-content" id="lScroll"> 

    /*... MORE LIKE THIS ... */ 
    <div class="card"> 
     <div class="city-selected city-medium clickChampion pointer" 
    data-champ-id="1"> 
     <article> 
      <div class="info"> 
       <div class="city"> 
        CHAMPNAME 
       </div> 
      </div> 
     </article> 
      <figure class="cFigure lazy" data-src="images/champions/CHAMPNAME_0.png"></figure> 
     </div> 
    </div> 
    /*... MORE LIKE THIS ... */ 

</div>

于是我开始插件和它的作品的第一批可见，当我滚动：

var $lazy = $('#lScroll .lazy'); 
if ($lazy.length) { 
    $lazy.Lazy({ 
     appendScroll: $('#lScroll') 
    }); 
}

但现在我有一个功能， “过滤器”的div通过它们的属性，当我在搜索输入进入某事，它无法加载图像时，根据格所示：

$(document).on("keyup", "#searchVod", function() { 
    var $search = $(this); 
    var $sVal = $search.val().toLowerCase(); 
    if ($sVal !== "") { 
     $(".vodCard").hide(); 
     $('[data-champ*="' + $sVal + '"]').show(); 
     $('[data-role*="' + $sVal + '"]').show(); 
    } else { 
     $(".vodCard").show(); 
    } 
});

我试图bind: "event"/W和W /出delay: 0（在搜索功能中加载插件），但是当我搜索它会立即在后台加载所有图像。

高度赞赏任何暗示

更新：我刚刚注意到在Chrome DevTab我在搜索框输入一个字母后它加载的所有图像，最后一个我正在寻找（如果最后需要一定的时间（ 30MB某物）

来源

2017-08-28 PrimuS

仍然在学习如何使用jsfiddle，但现在，看看现场也许吧？ https://leaguestreams.net/vods/by-champion滚动一下，然后在顶部输入“Zac”...然后编辑我的问题 – PrimuS

有一个叫Lozad.js个很好的书房，它可以帮助你更容易地加载图片时想偷懒的负荷做，但更简单的方法。

您可以从GitHub下载here。

演示页面here。

说明：
该库将在类名滚动到每个锚图像加载图片逐个。

例

HTML：
在头 - >

<script src="https://cdn.jsdelivr.net/npm/lozad"></script>

图片元素应该是这样的：

<img class="lozad" data-src="image.png">

的Javascript

// Initialize library 
lozad('.lozad', { 
    load: function(el) { 
     el.src = el.dataset.src; 
     el.onload = function() { 
      el.classList.add('fade') 
     } 
    } 
}).observe()

希望它能帮助你。
最好，
伊多。

来源

2017-09-27 14:49:36 Idoshhh

延迟加载滚动图片和“进入视图”

回答

相关问题