首页 网页js代码 点击按钮加载更多懒加载jquery代码 2019年12月16日 0条评论 点击按钮加载更多懒加载jquery代码 内容 相关 点击按钮加载更多,比较实用,用于列表很方便,代码已经精简。直接复制主要部分就可以使用了。 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>点击按钮加载更多(懒加载,每次加载N个)</title> <style> *{margin: 0;padding:0;list-style: none;} body{background: #333;font-size: 14px;font-family:"微软雅黑"} a{color: #333;text-decoration: none;} .hidden{ display: none;} .wuioo{width: 800px;height: auto;margin:0 auto;overflow: hidden;text-align: left;background:#fff;padding:5px;} .wuioo ul.list{overflow: hidden;} .wuioo ul.list li{width: 150px;height: 150px;margin:5px;float: left;overflow: hidden;} .wuioo ul.list li img{width: 100%;height: 100%;} .wuioo ul.list p{text-align: center;padding: 10px;} .wuioo .more{overflow: hidden;padding:10px;text-align: center;} .wuioo .more a{display: block;width: 80px;padding:8px 0;color:#fff;margin:0 auto;background:#333;text-align:center;border-radius:3px;} .wuioo .more a:hover{text-decoration: none;background: red;color: #fff;} </style> </head> <body> <!--代码部分begin--> <div class="wuioo"> <div class="hidden"> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> <li><img src="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" realSrc="https://ae01.alicdn.com/kf/HTB1.sD2XUH1gK0jSZSy760tlpXaZ.png" width="150" height="150" /></li> </div> <ul class="list">数据加载中,请稍后...</ul> <div class="more"><a href="javascript:;" onClick="wuioo.loadMore();">加载更多</a></div> </div> <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <script> var _content = []; //临时存储li循环内容 var wuioo = { _default:10, //默认显示图片个数 _loading:5, //每次点击按钮后加载的个数 init:function(){ var lis = $(".wuioo .hidden li"); $(".wuioo ul.list").html(""); for(var n=0;n<wuioo._default;n++){ lis.eq(n).appendTo(".wuioo ul.list"); } $(".wuioo ul.list img").each(function(){ $(this).attr('src',$(this).attr('realSrc')); }) for(var i=wuioo._default;i<lis.length;i++){ _content.push(lis.eq(i)); } $(".wuioo .hidden").html(""); }, loadMore:function(){ var mLis = $(".wuioo ul.list li").length; for(var i =0;i<wuioo._loading;i++){ var target = _content.shift(); if(!target){ $('.wuioo .more').html("<p>全部加载完毕...</p>"); break; } $(".wuioo ul.list").append(target); $(".wuioo ul.list img").eq(mLis+i).each(function(){ $(this).attr('src',$(this).attr('realSrc')); }); } } } wuioo.init(); </script> <!--代码部分end--> </body> </html> 运行代码清空代码复制代码 点赞  (1) 打赏 分享 支付宝扫一扫 微信扫一扫 企鹅扫一扫