1.viewer的用法：
关于viewer，一款强大的jquery图片查看器可以看这篇文章
https://blog.csdn.net/lianzhang861/article/details/80702741
下载地址：
https://download.csdn.net/download/lianzhang861/10480866
值得一提的是，不管你的img被什么元素包裹（li,div,或者单纯的img），viewer都可以在你点击图片时正常使用
<body>
<ul id="viewer">
<li>
<img src="img/lks1.jpg" alt="" />
</li>
<li>
<img src="img/lks2.jpg" alt="" />
</li>
<li>
<img src="img/lks3.jpg" alt="" />
</li>
<li>
<img src="img/lks4.jpg" alt="" />
</li>
</ul>
<div id="viewer">
<div>
<img src="img/lks1.jpg" alt="" />
</div>
<div>
<img src="img/lks2.jpg" alt="" />
</div>
<div>
<img src="img/lks3.jpg" alt="" />
</div>
<div>
<img src="img/lks4.jpg" alt="" />
</div>
</div>
<div id="viewer" style="display: none;">
<img src="img/lks2.jpg" alt="" />
<img src="img/lks1.jpg" alt="" />
</div>
<script type="text/javascript">
$("#viewer").viewer();
</script>
</body>初始化就是用$(“#viewer”).viewer();
销毁为$(“#viewer”).viewer(“destroy”);
重点
：viewer只能初始化一次，也就是说如果用ajax添加了新的图片，你再初始化新添加的图片还是出不来，只有第一次初始化加载的图片
解决办法
：1.不建议的方法：每次ajax完都$(“#viewer”).viewer(“destroy”)一下再$(“#viewer”).viewer()，此方法太麻烦
2.
建议的方法
：每次ajax完都用 $(“#viewer”).viewer(“update”) 方法来更新一下
2.lazyload使用
lazyload作为jquery的懒加载插件效果相当不错，会自动判断图片是否出现在屏幕显示区域，在才会请求图片资源。
图片可以不写src，只写data-original属性，也可以写src给一个loading图片的路径
<img class="lazy" data-original="img/bmw_m1_hood.jpg">
<img class="lazy" data-original="img/bmw_m1_side.jpg">
<img class="lazy" data-original="img/viper_1.jpg">
<img class="lazy" data-original="img/viper_corner.jpg">
<img class="lazy" data-original="img/bmw_m3_gt.jpg">
<img class="lazy" data-original="img/corvette_pitstop.jpg">
<script type="text/javascript" charset="utf-8">
$(function() {
$("img.lazy").lazyload({effect: "fadeIn"});
});
</script>$("img.lazy").lazyload({
placeholder : "img/grey.gif", //用图片提前占位
// placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
effect: "fadeIn", // 载入使用何种效果
// effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
threshold: 200, // 提前开始加载
// threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
event: 'click', // 事件触发时才加载
// event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
container: $("#container"), // 对某容器中的图片实现效果
// container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
failurelimit : 10 // 图片排序混乱时
// failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
});
3.实例
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="${ctx }/resource/css/viewer.css">
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="${ctx }/resource/js/viewer.js"></script>
<script src="${ctx }/resource/js/jquery.lazyload.js"></script>
<title>相册</title>
<style type="text/css">
td,th{
text-align:center !important;
}
.images{
padding:10px;
}
.images .image{
padding:0px;border:1px solid #ddd;
background:white;margin-right:20px;
margin-bottom:20px;padding-bottom:0;
height:160px;
}
.images .image:hover{
cursor:pointer;box-shadow:2px 2px 2px #ddd;
}
.images .image img{
width:100%;height:130px;
}
.images .image p{
height:30px;line-height:30px;
text-align: center;margin-bottom:0;
overflow:hidden;
}
.shadow{
position: fixed;width:100%;height:1000px;z-index:1000000;background:rgba(0,0,0,0.5)
}
</style>
</head>
<body>
<div class="big-page">
<div class="col-xs-12 col-sm-12 radius">
<div class="images">
</div>
</div>
</div>
<script type="text/javascript">
var start=1;//页码
var length=20;//每页图片数
var pages;//总页数
var loading = false; //加载控制阀，防止在ajax请求时继续触发请求
$(function(){
loadImages();
})
//页面滚动时加载图片
$(window).scroll(function(){
if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
if(loading == false){
//触发后禁止再次触发，等loadImages加载完成后才能继续触发
loading = true;
if(start<pages){//页码小于总页数才加载
start++;
loadImages();
}
}
}
});
//ajax请求加载图片
function loadImages(){
$.ajax({
type: 'POST',
url: "${ctx}/webmana/getImages",
data:{
classId:$("input[name=classId]").val(),
start:start,
length:length,
},
dataType: 'json',
async:false,
success: function(data){
if(data.success){
var html='';
var data1=data.data;
for(var i=0;i<data1.size;i++){
var data=data1.list[i];
html+='<div class="image col-xs-4 col-sm-2 .col-md-2" title="'+data.attachment_name+'">'
html+='<img class="lazy" data-original="${ctx}'+data.attachment_url+'" alt="">'
html+='<p>'+data.attachment_name+'</p>'
html+='</div>'
}
//给总页数赋值
pages=data1.pages;
$el=$(html);
$(".images").append($el);
//重点：每次都给新添加的img绑定懒加载
$("img.lazy",$el).lazyload({effect: "fadeIn"});
// $(".images").viewer("destroy");
//重点：每次都要给viewer更新绑定
$(".images").viewer("update");
//全部完成后恢复滚动触发功能
loading = false;
}
},
error:function(data) {
//console.log(data.msg);
},
});
}
</script>
</body>
</html>这里提一下不要每次ajax完都执行$(“img.lazy”).lazyload({effect: “fadeIn”})，这样会把所有图片都重新绑定一遍懒加载，也就是说加载过得图片回滚时图片又会闪烁一遍，用户体验不好
解决办法
：$el=$(html);
$(“.images”).append($el);
//重点：每次都给新添加的img绑定懒加载
$(“img.lazy”,$el).lazyload({effect: “fadeIn”});
每次都给新添加的元素中找img绑定懒加载，注意$(“子”，“父”)，的jq选择器形式，与$(“兄弟,兄弟”)，$(“父 子”)的区别；