Question

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

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

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加载时缺少滚动事件，默认情况下为lazy。在我的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.
        });
    });

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

2 个答案: