jQuery懒加载插件页面滚动加载数据代码



132 526 176



特效描述:懒加载插件 页面滚动 加载数据,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

加群请备注:从官网了解到