jQuery Lazyload images after live-search

Question

I have a HTML page with a lot of images, all in their own div, each div having the same size, like this:

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>

I decided to use the Lazy Load Plugin for jQuery to load the images as I scroll to them.

LAZY LOAD IMPLEMENTATION:

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

For those of you who do not know what Lazy Load is: Lazy Load

This all worked out great, untill I implemented a livesearch function. This searches the divs for a word, a phrase, that is typed in a form and hides the divs not matching the search input.

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

The search works great, it hides and shows the right divs really fast, but the problem is that in the search result, only the images that were already scrolled to beforehand were propperly displayed. The other divs were still displaying "transparant.gif"

What can i do to update the "src" of the images in the search result tho their "data-original" image?

Answer 1

Okay, since the lazyload function is triggered by a scrolling event, adding a $(window).trigger("scroll") to the code did the trick.

I added this in right after $("#filter-count").text("Number of Comments = "+count); so that every time a search was completed, a scroll-trigger was made and lazyload loaded the images currently in frame.

Answer 2

You have to run/update lazyload everytime your DIVs are updated.

Edit:

lazyload seems to run on scroll, try adding $(window).trigger('scroll'); on every keyup

Answer 3

trigger lazyload function after some second as below

    $(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");
    }
});