jquery中列表缩略图的延迟加载

您好，我正在尝试创建一个动态列表，其中包含1000个项目和图像。图像的来源类似于互联网

<img class="lazy" src="http://www.wrensoft.com/zoom/images/zoom_image_search_screenshot.png">

我正在使用jquery。我希望在加载每个图像之前，图像列表都有alt图标，并且图像应该一个接一个地加载。但是，直到所有的图像加载，只有空屏幕显示。我有html代码 和js代码

HTML

你好
window.$=window.jQuery=WLJQ；

JS

函数wlCommonInit（）{
for（var i=0；i图像将在javascript启动之前开始加载

<img src="path/to/generic/image.png" data-src="http://www.wrensoft.com/zoom/images/zoom_image_search_screenshot.png" class="lazy">

这是未经测试的，您应该改用
prop
。这是我在任何情况下都会做的。不久前，我已经对那些懒散的插件失去了所有希望

你可以做的另一件事是在大多数浏览器加载透明图像时，将普通图像作为背景添加到div（如果你知道图像的大小）中，这样你就不必搞乱js等等

function wlCommonInit(){


    for(var i=0;i<1000;i++)
        {
        var temp='<li><img class="lazy" src="http://www.wrensoft.com/zoom/images/zoom_image_search_screenshot.png"></li>';
        $("#listId").append(temp);
        $("#listId").listview("refresh");
        }
    $("img.lazy").lazyload({ 
        effect: "fadeIn" 
    }).removeClass("lazy");
}

<img src="path/to/generic/image.png" data-src="http://www.wrensoft.com/zoom/images/zoom_image_search_screenshot.png" class="lazy">

$(".lazy").each(function(){
    var $this = $(this);
    $.load($this.attr("data-src"),function(){
        $this.attr("src",$this.attr("data-src"));
    })
});