jQuery懶加載插件頁面滾動加載數據代碼



138 549 184



特效描述:懶加載插件 頁面滾動 加載數據,jquery預加載插件,jquery懶加載插件,jquery 滾動加載插件,jquery ?數據延遲加載插件 ?附帶簡單的Demo效果

代碼結構

1. 引入JS

<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="DataLazyLoad.js"></script>

2. HTML代碼

    <div class='main'>
        <ul class='list'>
            <li class='h2'>Data Lazy Load Simple</li>
            <li>aaaa</li>
            <li>bbbb</li>
            <li>cccc</li>
            <li>dddd</li>
            <li>eeee</li>
            <li>ffff</li>
            <li>gggg</li>
            <li>hhhh</li>
            <li>iiii</li>
            <li>jjjj</li>
            <li>kkkk</li>
            <li>llll</li>
            <li>mmmm</li>
            <li>nnnn</li>
            <li>oooo</li>
            <li>pppp</li>
            <li>qqqq</li>
            <li>rrrr</li>
            <li>ssss</li>
            <li>tttt</li>
            <li>uuuu</li>
            <li>vvvv</li>
            <li>wwww</li>
            <li>xxxx</li>
            <li>yyyy</li>
            <li>zzzz</li>
        </ul>
    </div>
    <script type="text/javascript" charset="utf-8">
        $(function () {
            //Call DataLazyLoad
            $(".list").DataLazyLoad({ load: function (page, unLocked) {
                var html = '';
                var max = 10;
                //Generate the data
                for (var i = 0; i < 10; i++) {
                    html += '<li>Page: ' + page + ', Data Index: ' + i + ' </li>';
                }
                $(html).appendTo('.list');
                //Check whether to end
                page = page >= max ? 0 : page + 1;
                //To prevent repeated load, The first parameter to the next page, No page is 0
                unLocked(page);
                if (page == 0) {
                    $("<li class = 'h2'>The End!</li>").appendTo('.list');
                }
            }
            });
        });
    </script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動星星打分 其他 多功能 多功能插件
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子