以前在做项目的时候,把jquery.lazyload.js和iscroll.js一起使用,当滑动页面的时候,iscroll的滑动效果出来了,但是图片懒加载的效果没出来,主要是因为图片缓冲完毕后不能及时刷新
解决两者兼容问题操作:1、(iscroll.js和lazyload.js的兼容(滑动时,缓冲好的图片不更新)):
onScrollMove: function(){ $("#"+id).trigger('scroll');//iscroller和loadlazy.js图片缓冲完毕后不能及时刷新,加上这个模拟浏览器被滑动,那么图片就可以刷新了}
原理是:只要浏览器滚动,那么图片就会刷新,所以在scroll滚动时模拟浏览器滚动,这个问题就解决了。
另外我的这段代码可谓神来之笔,大家好好看看2、
//这一步很重要,否则图片不能完成缓冲效果(原理:在src正在加载完后,就设置为可以缓冲。) $("#storeImgs ul li img").on("load",function(){ $("#storeImgs ul li img").lazyload({ effect: "fadeIn", //加载图片使用的效果(淡入) threshold : 400 //在离可视区400px以内的图片也开始加载了,提升体验度 }); });
下面先给大家看个全的代码,复制粘贴可直接看到全部效果。
若不能,请自行导入:jquery-1.7.1.min.js,jquery.lazyload.js,iscroll.js三个库。title