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 для jQuery для загрузки изображений, когда я прокручиваю их.

LAZY НАГРУЗКИ РЕАЛИЗАЦИЯ:

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

Для тех из вас, кто не знает, что Ленивый Нагрузка: Lazy Load

Это все получилось замечательно, до тех пор пока я реализовал функцию livesearch. Это ищет divs для слова, фразы, которая вводится в форму и скрывает divs, не соответствующие поисковому вводу.

HTML FORM:

<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

поиска прекрасно работает, она скрывает и показывает правильные дивы очень быстро, но проблема заключается в том, что в результат поиска, были показаны только изображения, которые были прокручены заранее. Другие divs все еще отображали «transparentant.gif»

Что я могу сделать, чтобы обновить «src» изображений в результатах поиска в их «исходном» изображении?

Answer 1

Ладно, так как функция LazyLoad срабатывает при прокрутке события, добавляя $(window).trigger("scroll") к коду сделал трюк.

Я добавил это сразу после $("#filter-count").text("Number of Comments = "+count); , так что каждый раз, когда поиск был завершен, запускался прокрутки, и lazyload загружал изображения, находящиеся в рамке.

Answer 2

Вы должны запускать/обновлять lazyload каждый раз, когда ваши DIVs обновляются.

Edit:

LazyLoad, кажется, работает на свитке, попробуйте добавить $(window).trigger('scroll'); на каждом 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"); 
    } 
});