延迟加载

嗨，我想创建与1000个项目的动态列表与后援图像内的图像具有互联网源像延迟加载

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

我使用jquery.I希望使用alt图标列出图像，直到每个图像加载完毕，图像也应逐一加载。而是直到所有图片加载中，只有空屏被showed.I有HTML代码和js代码

HTML

<!DOCTYPE HTML> 
<html> 
     <head> 
      <meta charset="UTF-8"> 
      <title>hi</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> 
      <!-- 
       <link rel="shortcut icon" href="images/favicon.png"> 
       <link rel="apple-touch-icon" href="images/apple-touch-icon.png"> 
      --> 
      <link rel="stylesheet" href="css/main.css"> 
      <link rel="stylesheet" href="css/jquery.mobile-1.3.2.css"> 
      <script>window.$ = window.jQuery = WLJQ;</script> 
     </head> 
     <body style="display: none;"> 

      <ul id="listId" data-role="listview"> 
       <li><img class="lazy" src="http://www.wrensoft.com/zoom/images/zoom_image_search_screenshot.png" width="640" height="640"></li> 
       <li><img class="lazy" src="http://www.wrensoft.com/zoom/images/zoom_image_search_screenshot.png"></li> 
       <li><img class="lazy" src="http://www.wrensoft.com/zoom/images/zoom_image_search_screenshot.png"></li> 
       <li><img class="lazy" src="http://www.wrensoft.com/zoom/images/zoom_image_search_screenshot.png"></li> 
       <li><img class="lazy" src="http://www.wrensoft.com/zoom/images/zoom_image_search_screenshot.png"></li> 
      </ul> 

      <script src="js/jquery.lazyload.js"></script> 
      <script src="js/jquery.mobile-1.3.2.min.js"></script> 
      <script src="js/initOptions.js"></script> 
      <script src="js/main.js"></script> 
      <script src="js/messages.js"></script> 
     </body> 
</html>

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

请帮忙找到我的解决办法通过提供想法，文件或解决方案本身

来源

2014-09-20 BalajiG

图像将开始加载之前JavaScript甚至踢英寸如果你可以强迫你的客户nee丁JS，你可以通过使用类似

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

实现它，这是未经测试，你应该使用prop代替。这是我会在任何情况下做的。前一段时间在这些lazyload插件中失去了所有希望

您可以做的另一件事是在图像加载时将通用图像作为背景添加到div（如果您知道图像的大小）大多数浏览器其透明。这样你就不必与js等混在一起

来源

2014-09-23 08:22:17 WilliamStam

回答

相关问题