jQuery.lazy() plugin not working on images loaded via AJAX

Question

The lazy plugin works fine for the initially loaded elements but doesn't work for images loaded via AJAX despite having the code in done function of the AJAX call.

Here is my code for lazy loading images

jQuery(document).ready(function() {
    jQuery("img.lazy").lazy({
        effect: "fadeIn",
        effectTime: 1000
    });
});

Here is my AJAX call

$(document).ready(function() {
    $('#loadmore-dj').on('click', function() {
        $('#loadmore-dj').hide();
        $('#loadmore-dj-gif').css( "display", "block");
        $.ajax({
            type: "GET",
            url: "/loadmore/dj/",
            data: {
                'slug': $('.dj_slug').text().trim(),
                'song_rank': $("#dj_song_list").find('.song_block').length
            },
        }).done(function (response) {
            $(response).appendTo($('#dj_song_list')).hide().fadeIn(1000);
            playOneAudio();
            jQuery(document).ready(function() {
                jQuery("img.lazy").lazy({
                    effect: "fadeIn",
                    effectTime: 1000
                });
            });
            $('#loadmore-dj').show();
            $('#loadmore-dj-gif').hide();
        }).done(hideLoadMore);
    });
});

Remove the inner jQuery(document).ready(function() {...}) wrapper from your .done callback; it's not needed. — Blazemonger
– Blazemonger, Commented Aug 13, 2014 at 20:53

Yin Yang · Accepted Answer · 2014-08-14 08:38:56Z

9

The problem was the missing scroll-event on the AJAX load with lazy by default. Adding the config parameter bind: "event" to lazy in my ajax function solved the issue.

jQuery("img.lazy").lazy({
    effect: "fadeIn",
    effectTime: 1000,
    bind: "event"
});

answered Aug 14, 2014 at 8:38

Yin Yang

1,8163 gold badges28 silver badges48 bronze badges

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

1 Comment

phil Over a year ago

Thanks for this, it solved it! Was wondering why nothing was working.

Blazemonger · Accepted Answer · 2014-08-13 20:57:33Z

0

Your .lazy plugin is called before the fadeIn is complete. Try this --

    }).done(function (response) {
        $(response).appendTo($('#dj_song_list')).hide().fadeIn(1000, function() {
            playOneAudio();
            jQuery("img.lazy").lazy({ // don't need document.ready twice
                effect: "fadeIn",
                effectTime: 1000
            });
            $('#loadmore-dj').show();
            $('#loadmore-dj-gif').hide();
            hideLoadMore(); // don't need two .done() callbacks.
        });
    });

answered Aug 13, 2014 at 20:57

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

2 Comments

Yin Yang Over a year ago

I just tried this, it didn't work. However, if I click on the button that calls the AJAX function before the initial images are loaded, the images loaded via AJAX are lazy loaded.

Yin Yang Over a year ago

I'm trying to create a JSFiddle but since it involves an AJAX script, I'm having an hard time figuring out how to do that.

Collectives™ on Stack Overflow

jQuery.lazy() plugin not working on images loaded via AJAX

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related