HOWTO：Long ListView wirh縮略圖延遲加載？

我需要幫助。我有一個很長的ListView與縮略圖圖標。這樣 - http://jquerymobile.com/demos/1.1.1/docs/lists/lists-thumbnails.html HOWTO：Long ListView wirh縮略圖延遲加載？

我該如何調整系統，以便在第一次只顯示屏幕上顯示的項目時，會加載這些縮略圖。然後，如果用戶向下滾動，則會加載更多縮略圖圖像。即隨着用戶向下滾動，圖像將被加載。

同樣的事情發生在Facebook的時間軸。嘗試看舊帖....

我不知道如何輕鬆做到這一點？

來源

2012-07-26 Ayan Don

嘗試這些演示：

DEMO 1

用法HTML：

<ul class="items"> 
    <li>content</li> 
    <li>content</li> 
    ... 
</ul> 
<div id="lastPostsLoader"></div>

用法的jQuery：

<script type="text/javascript"> 
$(document).ready(function(){ 
    function lastAddedLiveFunc() 
    { 
     $('div#lastPostsLoader').html('<img src="bigLoader.gif">'); 

     $.get("loadmore.php", function(data){ 
      if (data != "") { 
       //console.log('add data..'); 
       $(".items").append(data); 
      } 
      $('div#lastPostsLoader').empty(); 
     }); 
    }; 

    //lastAddedLiveFunc(); 
    $(window).scroll(function(){ 

     var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight =  $(window).height(); 
     var scrolltrigger = 0.95; 

     if ((wintop/(docheight-winheight)) > scrolltrigger) { 
     //console.log('scroll bottom'); 
     lastAddedLiveFunc(); 
     } 
    }); 
});

DEMO 2

用法HTML：

<div id="postswrapper"> 
    <div class="item">content</div> 
    ... 
    <div id="loadmoreajaxloader" style="display:none;"><center><img src="ajax-loader.gif" /></center></div> 
</div>

用法的jQuery：

<script type="text/javascript"> 
$(window).scroll(function() 
{ 
    if($(window).scrollTop() == $(document).height() - $(window).height()) 
    { 
     $('div#loadmoreajaxloader').show(); 
     $.ajax({ 
     url: "loadmore.php", 
     success: function(html) 
     { 
      if(html) 
      { 
       $("#postswrapper").append(html); 
       $('div#loadmoreajaxloader').hide(); 
      }else 
      { 
       $('div#loadmoreajaxloader').html('<center>No more posts to show. </center>'); 
      } 
     } 
     }); 
    } 
}); 
</script>

來源

2012-07-26 09:13:04

HOWTO：Long ListView wirh縮略圖延遲加載？

回答

相關問題