javascript - 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 时缺少滚动事件。在我的 ajax 函数中将配置参数添加bind: "event"到 lazy 解决了这个问题。

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

Answer 2

.lazy在完成之前调用您的插件fadeIn。试试这个 -

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