JS页尾处自动加载JavaScript库dropload.min.js

弘毅

1. https://github.com/ximan/dropload

复制代码

1. 
   
2. 
   
3. <!-- jQuery1.7以上 或者 Zepto 二选一，不要同时都引用 -->
   
4. <script src="js/zepto.min.js"></script>
   
5. <script src="../dist/dropload.min.js"></script>
   
6. <script>
   
7. $(function(){
   
8.     // 按钮操作
   
9.     $('.header .btn').on('click',function(){
   
10.         var $this = $(this);
    
11.         if(!!$this.hasClass('lock')){
    
12.             $this.attr('class','btn unlock');
    
13.             $this.text('解锁');
    
14.             // 锁定
    
15.             dropload.lock();
    
16.             $('.dropload-down').hide();
    
17.         }else{
    
18.             $this.attr('class','btn lock');
    
19.             $this.text('锁定');
    
20.             // 解锁
    
21.             dropload.unlock();
    
22.             $('.dropload-down').show();
    
23.         }
    
24.     });
    
25. 
    
26.     // dropload
    
27.     var dropload = $('.inner').dropload({
    
28.         domUp : {
    
29.             domClass   : 'dropload-up',
    
30.             domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
    
31.             domUpdate  : '<div class="dropload-update">↑释放更新</div>',
    
32.             domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
    
33.         },
    
34.         domDown : {
    
35.             domClass   : 'dropload-down',
    
36.             domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
    
37.             domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
    
38.             domNoData  : '<div class="dropload-noData">暂无数据</div>'
    
39.         },
    
40.         loadUpFn : function(me){
    
41.             $.ajax({
    
42.                 type: 'GET',
    
43.                 url: 'json/update.json',
    
44.                 dataType: 'json',
    
45.                 success: function(data){
    
46.                     var result = '';
    
47.                     for(var i = 0; i < data.lists.length; i++){
    
48.                         result +=   '<a class="item opacity" href="'+data.lists[i].link+'">'
    
49.                                         +'<img src="'+data.lists[i].pic+'" alt="">'
    
50.                                         +'<h3>'+data.lists[i].title+'</h3>'
    
51.                                         +'<span class="date">'+data.lists[i].date+'</span>'
    
52.                                     +'</a>';
    
53.                     }
    
54.                     // 为了测试，延迟1秒加载
    
55.                     setTimeout(function(){
    
56.                         $('.lists').html(result);
    
57.                         // 每次数据加载完，必须重置
    
58.                         dropload.resetload();
    
59.                     },1000);
    
60.                 },
    
61.                 error: function(xhr, type){
    
62.                     alert('Ajax error!');
    
63.                     // 即使加载出错，也得重置
    
64.                     dropload.resetload();
    
65.                 }
    
66.             });
    
67.         },
    
68.         loadDownFn : function(me){
    
69.             $.ajax({
    
70.                 type: 'GET',
    
71.                 url: 'json/more.json',
    
72.                 dataType: 'json',
    
73.                 success: function(data){
    
74.                     var result = '';
    
75.                     for(var i = 0; i < data.lists.length; i++){
    
76.                         result +=   '<a class="item opacity" href="'+data.lists[i].link+'">'
    
77.                                         +'<img src="'+data.lists[i].pic+'" alt="">'
    
78.                                         +'<h3>'+data.lists[i].title+'</h3>'
    
79.                                         +'<span class="date">'+data.lists[i].date+'</span>'
    
80.                                     +'</a>';
    
81.                     }
    
82.                     // 为了测试，延迟1秒加载
    
83.                     setTimeout(function(){
    
84.                         $('.lists').append(result);
    
85.                         // 每次数据加载完，必须重置
    
86.                         dropload.resetload();
    
87.                     },1000);
    
88.                 },
    
89.                 error: function(xhr, type){
    
90.                     alert('Ajax error!');
    
91.                     // 即使加载出错，也得重置
    
92.                     dropload.resetload();
    
93.                 }
    
94.             });
    
95.         }
    
96.     });
    
97. });
    
98. </script>
    
99. 
    

复制代码