Question

我需要帮助。我有一个带缩略图标的长ListView。像这样 - http://jquerymobile.com/demos/1.1.1/docs/lists/lists-thumbnails.html

如何调整系统，以便在第1页仅显示屏幕上显示的项目，这些缩略图将被加载。然后，如果用户向下滚动，则将加载更多缩略图图像。也就是当用户向下滚动时，图像将被加载。

同样的事情发生在Facebook时间线上。试着看看旧帖子......

我不知道怎么容易这么做？

Answer 1

试试这些演示：

使用HTML：

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

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

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

如何：Long ListView缩略图延迟加载？

1 个答案: