後實時搜索的jQuery Lazyload圖像

Question

我有一個HTML頁面有大量的圖片，都在自己的格，每個div都具有相同的大小，類似這樣的：

HTML：

<div class="maindiv"> 
    <div class="mboxclass"> 
     <p>image1</p> 
     <img class="imgclass" src="transparant.gif" data-original="actual1.jpg"> 
    </div> 

    <div class="mboxclass"> 
     <p>image2</p> 
     <img class="imgclass" src="transparant.gif" data-original="actual2.jpg"> 
    </div> 

    <div class="mboxclass"> 
     <p>image3</p> 
     <img class="imgclass" src="transparant.gif" data-original="actual3.jpg"> 
    </div> 

    ... 

</div> 

我決定使用Lazy Load Plugin for jQuery在我滾動到它們時加載圖像。

延遲加載實現：

$("img.imgclass").lazyload(); 

對於那些你們誰不知道延遲加載是什麼：Lazy Load

這一切都制定出偉大的，直到我實現了一個實況搜索功能。這將在div中搜索一個單詞，一個短語，該短語在表單中鍵入並隱藏不匹配搜索輸入的div。

HTML表單：

<form id="live-search" action="" class="styled" method="post"> 
    <fieldset> 
     <input type="text" class="text-input" id="filter" value="" /> 
     <span id="filter-count"></span> 
    </fieldset> 
</form> 

JS：

$(document).ready(function(){ 
    $("#filter").keyup(function(){ 

     // Retrieve the input field text and reset the count to zero 
     var filter = $(this).val(), count = 0; 

     // Loop through the comment list 
     $(".maindiv div").each(function(){ 

      // If the list item does not contain the text phrase fade it out 
      if ($(this).text().search(new RegExp(filter, "i")) < 0) { 
       $(this).hide(); 

      // Show the list item if the phrase matches and increase the count by 1 
      } else { 
       $(this).show(); 
       count++; 
      } 
     }); 

     // Update the count 
     var numberItems = count; 
     $("#filter-count").text("Number of Comments = "+count); 
    }); 
}); 

Source

搜索的偉大工程，它隱藏和顯示正確的div真快，但問題是，在搜索結果，只有預先滾動的圖像才能正常顯示。其他div仍然顯示「transparant.gif」

我該如何更新搜索結果中「圖像的」src「他們的」數據原始「圖像？

Answer 1

好吧加入$(window).trigger('scroll');，因爲lazyload功能是通過滾動事件觸發，增加了$(window).trigger("scroll")的代碼並獲得成功。

我在$("#filter-count").text("Number of Comments = "+count); 之後立即添加了這個，這樣每次搜索完成後，就會產生一個滾動觸發器，並且延遲加載當前幀中的圖像。

Answer 2

您必須在每次更新DIV時運行/更新lazyload。

編輯：

lazyload似乎在滾動運行，試着在每keyup

Answer 3

觸發lazyload功能後，一些第二如下

$(document).ready(function(){ 
     $("#filter").keyup(function(){ 

      // Retrieve the input field text and reset the count to zero 
      var filter = $(this).val(), count = 0; 

      // Loop through the comment list 
      $(".maindiv div").each(function(){ 

       // If the list item does not contain the text phrase fade it out 
       if ($(this).text().search(new RegExp(filter, "i")) < 0) { 
        $(this).hide(); 

       // Show the list item if the phrase matches and increase the count by 1 
       } else { 
        $(this).show(); 
        count++; 
       } 
      }); 

      // Update the count 
      var numberItems = count; 
      $("#filter-count").text("Number of Comments = "+count); 
      window.setTimeout(show_images, 5000); // 5 seconds 
    }); 
    function show_images(){ 
     $("img.lazy").lazyload().trigger("appear"); 
    } 
});