게으른 로딩이

안녕 난 좋았지 이미지 내부 이미지와 함께 1000 개 항목이 동적 목록을 작성하기 위해 시도하고게으른 로딩이

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

같은 인터넷에서 소스를 가지고 jquery.I가 원한 내가 사용하고 각 이미지가로드되고 이미지가 하나씩로드 될 때까지 이미지의 alt 아이콘이있는 목록. 하지만 그 대신 모든 이미지가로드까지 만 빈 화면이되는 showed.I가

<!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>

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

나에 대한 해결책을 찾기 위해 도와주세요 HTML 코드 및 JS 코드

HTML을 가지고있다 아이디어, 문서 또는 솔루션 자체를 제공하여

출처

2014-09-20 BalajiG

이미지가로드되기 시작합니다. 자바 스크립트가 실행되기 전에도 이미지가 표시됩니다. 땡 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

게으른 로딩이

답변

관련 문제