2

我正在使用 .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 不能做我想做的事。

4

4 回答 4

1

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/

于 2014-10-20T20:51:32.430 回答
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")可以防止延迟加载多次绑定到同一个元素。

于 2012-12-04T23:47:34.893 回答
1

我使用这两种选择

1）修改lazyload.js

搜索此行

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

并用这个替换

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

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

为新元素添加延迟加载：

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

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

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

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

$("img.lazy").lazyload().trigger("appear");
于 2013-06-11T12:42:18.410 回答
0

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

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

于 2013-05-27T08:01:49.610 回答