viewer.js+lazyload.js实现滚动ajax异步懒加载及图片查看器

 

1.viewer的用法：

关于viewer，一款强大的jquery图片查看器可以看这篇文章

https://blog.csdn.net/lianzhang861/article/details/80702741

下载地址：

https://download.csdn.net/download/lianzhang861/10480866

值得一提的是，不管你的img被什么元素包裹（li,div,或者单纯的img），viewer都可以在你点击图片时正常使用

初始化就是用$("#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.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.实例

这里提一下不要每次ajax完都执行$("img.lazy").lazyload({effect: "fadeIn"})，这样会把所有图片都重新绑定一遍懒加载，也就是说加载过得图片回滚时图片又会闪烁一遍，用户体验不好

解决办法：$el=$(html);
                   $(".images").append($el);
                    //重点：每次都给新添加的img绑定懒加载
                   $("img.lazy",$el).lazyload({effect: "fadeIn"});

每次都给新添加的元素中找img绑定懒加载，注意$("子"，“父”)，的jq选择器形式，与$("兄弟,兄弟")，$("父 子")的区别；