延遲加載滾動圖片和「進入視圖」

我使用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

延遲加載滾動圖片和「進入視圖」

回答

相關問題