JQuery Lazyload images after .append()

Question

I am loading images into a div using .append()

How can I use the lazy loader plugin on these newly appended images? Is there a way to do it?

UPDATE: Here's the code

//This is a live search script, type something in #livesearch input and it populates a #results ul list with the results
$('#livesearch').live('keyup', function(event) {
    //after ke press detected immediately clear the results div of any previous content
    $('#results').html("");
    // Use the inputed letters to send off an ajax request
    $.getJSON("http://xxxxxx.com/live/" + $(this).val(), function(resp){
            //the ajax returns a json object, next loop through the object and print out the results in a list using append
            $.each(resp.response.docs, function(index, item) {  
            $('#results').append("<li><div style='background-color:rgb(31,31,31);padding:15px;color:rgb(255,255,255);'><span class='inline' style='width:125px;height:50px;margin-right:15px'><img data-original='img/"+item.nameid+".png' src='img/grey.gif' class='lazy' style='display:inline' height='50px'></span><span class='inline' style='width:300px;'><div style='font-size:14px;'>"+item.name+"</div><div style='font-size:12px;color:rgb(99,99,99)'>Strategy | 4 months ago | Played 2,000 times</div></span></div></li>");
        });
    });

    // The list that was created includes images and could have several hundred of them, therefore I would like to lazy load them as you scroll down
    // This line of code is just one of my failed attempts
    $("img.lazy").lazyload();
});

Because the images are added after the document has loaded I think the lazy loader plugin has difficulty 'seeing' the images in the original HTML since they do not exist there. Perhaps LazyLoad is not capable of doing what I want it to.

I have the same problem. I use lazyLoad after .append(). Every functions I put in $(document).ready(). Any solution? — emeraldhieu
– emeraldhieu, Commented May 27, 2013 at 7:19

Enrico · Accepted Answer · 2012-12-04 23:53:57Z

1

Call lazyload() from your getJSON callback

$.getJSON("http://xxxxxx.com/live/" + $(this).val(), function(resp){
    $.each(resp.response.docs, function(index, item) {  
        $('#results').append("<li>... \
            <img data-original='img/"+item.nameid+".png' \
            src='img/grey.gif' class='lazy' /> \
            ...</li>");
        });
    });
    $("img.lazy").lazyload().removeClass("lazy");
});

Adding .removeClass("lazy") prevents lazyload from binding to the same element multiple times.

edited Dec 4, 2012 at 23:53

answered Dec 4, 2012 at 23:47

Enrico

10.8k8 gold badges46 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lucas Scholten Over a year ago

Hi Enrico, thanks, but no luck. Just as before my images simply do not load at all.

Christian David · Accepted Answer · 2013-06-12 00:11:19Z

1

I use these 2 alternatives

1) Modify lazyload.js

Search this line

$(window).load(function() {
     update();
});

and replace with this

$(function () {
     update();
});

this is for both if page is loaded for first time or if by ajax call

for add lazyload to new elements write:

$( newElements ).find("img.lazy").lazyload();

if the new images aren't loaded yet, you have to prevent that the images be rendered in layout (because they do not have dimensions) Lazy Load might load them all (because they all are in viewport) so use this:

setTimeout(function(){
 $( newElements ).find("img.lazy").lazyload();
} ,500);

2) Or you can use this to force to show the images

$("img.lazy").lazyload().trigger("appear");

edited Jun 12, 2013 at 0:11

answered Jun 11, 2013 at 12:42

Christian David

1,5641 gold badge18 silver badges20 bronze badges

Comments

RafaSashi · Accepted Answer · 2014-10-20 20:51:32Z

jQuery now defines a when() function for the purpose of doing something after jQuery Ajax request(s) is/are done

// the following code will be executed when the ajax request resolve.
// the ajax function must return the value from calling the $.ajax() method.

$.when(ajax1()).done(function(a1){

        if($('img.lazy').length){

             $('img.lazy').lazyload({ 

                      effect:'fadeIn', 
                      threshold:500, 
                      failure_limit:2 

             }).removeClass('lazy').addClass('lazyloaded');

        }

    });

    function ajax1() {

        return $.ajax({
            url: "someUrl",
            dataType: "json",
            data:  yourJsonData,            
            ...
        });
    }

from: http://api.jquery.com/jQuery.when/

emeraldhieu · Accepted Answer · 2013-05-27 08:01:49Z

0

I knew how to solve this problem. You should put $("img.lazy").lazyload(); after you have done every dynamic appending.

In your situation, you must put it in function(index, item) (after append line).

answered May 27, 2013 at 8:01

emeraldhieu

9,43921 gold badges85 silver badges141 bronze badges

Collectives™ on Stack Overflow

JQuery Lazyload images after .append()

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related