Question

我使用.append（）

将图像加载到div中

如何在这些新附加的图像上使用延迟加载程序插件？有办法吗？

更新：以下是代码

//This is a live search script, type something in #livesearch input and it populates a #results ul list with the results
$('#livesearch').live('keyup', function(event) {
    //after ke press detected immediately clear the results div of any previous content
    $('#results').html("");
    // Use the inputed letters to send off an ajax request
    $.getJSON("http://xxxxxx.com/live/" + $(this).val(), function(resp){
            //the ajax returns a json object, next loop through the object and print out the results in a list using append
            $.each(resp.response.docs, function(index, item) {  
            $('#results').append("<li><div style='background-color:rgb(31,31,31);padding:15px;color:rgb(255,255,255);'><span class='inline' style='width:125px;height:50px;margin-right:15px'><img data-original='img/"+item.nameid+".png' src='img/grey.gif' class='lazy' style='display:inline' height='50px'></span><span class='inline' style='width:300px;'><div style='font-size:14px;'>"+item.name+"</div><div style='font-size:12px;color:rgb(99,99,99)'>Strategy | 4 months ago | Played 2,000 times</div></span></div></li>");
        });
    });

    // The list that was created includes images and could have several hundred of them, therefore I would like to lazy load them as you scroll down
    // This line of code is just one of my failed attempts
    $("img.lazy").lazyload();
});

因为图片是在文档加载后添加的，所以我认为延迟加载器插件很难“看到”原始HTML中的图像，因为它们不存在。也许LazyLoad无法做我想做的事。

Answer 1

从你的getJSON回调中调用lazyload（）

$.getJSON("http://xxxxxx.com/live/" + $(this).val(), function(resp){
    $.each(resp.response.docs, function(index, item) {  
        $('#results').append("<li>... \
            <img data-original='img/"+item.nameid+".png' \
            src='img/grey.gif' class='lazy' /> \
            ...</li>");
        });
    });
    $("img.lazy").lazyload().removeClass("lazy");
});

添加.removeClass("lazy")可防止lazyload多次绑定到同一元素。

Answer 2

我使用这两个替代方案

1）修改lazyload.js

搜索此行

$(window).load(function() {
     update();
});

并替换为此

$(function () {
     update();
});

这适用于第一次加载页面或者是否通过ajax调用

加载页面

用于向新元素添加lazyload写：

$( newElements ).find("img.lazy").lazyload();

如果尚未加载新图像，则必须防止图像在布局中呈现（因为它们没有尺寸）延迟加载可能会加载它们（因为它们都在视口中）所以使用这样：

setTimeout(function(){
 $( newElements ).find("img.lazy").lazyload();
} ,500);

2）或者您可以使用它来强制显示图像

$("img.lazy").lazyload().trigger("appear");

Answer 3

jQuery现在定义了一个when()函数，用于在jQuery Ajax请求完成后执行某些操作

// the following code will be executed when the ajax request resolve.
// the ajax function must return the value from calling the $.ajax() method.

$.when(ajax1()).done(function(a1){

        if($('img.lazy').length){

             $('img.lazy').lazyload({ 

                      effect:'fadeIn', 
                      threshold:500, 
                      failure_limit:2 

             }).removeClass('lazy').addClass('lazyloaded');

        }

    });

    function ajax1() {

        return $.ajax({
            url: "someUrl",
            dataType: "json",
            data:  yourJsonData,            
            ...
        });
    }

来自：http://api.jquery.com/jQuery.when/

Answer 4

我知道如何解决这个问题。在完成每个动态附加后，您应该放置$("img.lazy").lazyload();。

在您的情况下，您必须将其放入function(index, item)（append行之后）。

在.append（）之后的JQuery Lazyload图像

4 个答案: