jQuery.lazy()插件不能处理通过AJAX加载的图像

Question

延迟插件适用于最初加载的元素,但不适用于通过AJAX加载的图像,尽管代码在AJAX调用的done函数中.

这是我的延迟加载图像的代码

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

这是我的AJAX电话

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

Answer 1

问题是AJAX加载时缺少滚动事件,默认情况下为惰性.bind: "event"在我的ajax函数中将config参数添加到lazy解决了这个问题.

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