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);
    });
});

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);
    });
});

• javascript
• jquery
• ajax
• lazy-loading
• jquery-lazyload

• Remove the inner jQuery(document).ready(function() {...}) wrapper from your .done callback; it's not needed. – Blazemonger Commented Aug 13, 2014 at 20:53
• Is this the plugin? jquery.eisbehr.de/lazy – Blazemonger Commented Aug 13, 2014 at 21:19

2 Answers 2

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

Your .lazy plugin is called before the fadeIn is plete. 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.
        });
    });