0

助けが必要です。サムネイル アイコンを含む長い ListView があります。このように - http://jquerymobile.com/demos/1.1.1/docs/lists/lists-thumbnails.html

最初に画面に表示されているアイテムのみ、それらのサムネイルが読み込まれるようにシステムを微調整するにはどうすればよいですか。次に、ユーザーが下にスクロールすると、さらにサムネイル画像が読み込まれます。つまり、ユーザーが下にスクロールすると、画像が読み込まれます。

Facebookのタイムラインでも同じことが起こります。古い記事を見てみる....

これを簡単に行う方法がわかりませんか？

4

1 に答える 1

0

これらのデモを試してください:

デモ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();
        }
    });
});

デモ 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-26T09:13:04.127 に答える