iscroll.js和lazyload.js的兼容（滑动时，缓冲好的图片不更新）
解决 兼容问题操作：
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三个库。
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <script src="http://121.199.20.86/dw/res/js/jquery-1.7.1.min.js"></script> <script src="http://121.199.20.86/dw/res/weixin/js/jquery.lazyload.js"></script> <script src="http://121.199.20.86/dw/res/weixin/js/iscroll.js"></script> <title>title</title> </head> <body> <section id="wrapper"> <ul> <li> <img src="images/loading.gif" data-original="http://img.shu163.com/uploadfiles/wallpaper/2010/6/2010093006114284.jpg"> </li> <li> <img src="images/loading.gif" data-original="http://photo.8080.net/xiangce/17306/2007524205720/l_2007524205749.JPG"> </li> <li> <img src="images/loading.gif" data-original="http://photo.8080.net/xiangce/17306/2007524205720/l_20075242167.JPG"> </li> <li> <img src="images/loading.gif" data-original="http://imga.mumayi.com/android/wallpaper/2011/10/12/2011101205550352773473.jpg"> </li> <li> <img src="images/loading.gif" data-original="http://www.itoobz.com/uploads/allimg/1211/1-121125102551.jpg"> </li> <li> <img src="images/loading.gif" data-original="http://pic1.win4000.com/wallpaper/f/5101fb10c4543.jpg"> </li> <li> <img src="images/loading.gif" data-original="http://images-fast.digu.com/930d8830aef29ffe41bc9d2aa195d7d4_0009.jpg"> </li> <li> <img src="images/loading.gif" data-original="http://images.gamerlol.com/upload/2012/10/gl2012102511035273256579.jpg"> </li> <li> <img src="images/loading.gif" data-original="http://www.itoobz.com/uploads/allimg/1209/19-12091H23334.jpg"> </li> </ul> </section> </body> <style> ul{ width:100%; } li{ width:100%; margin-top:10px; } li img{width:100%;} </style> <script type="text/javascript"> window.onload = function(){ var scroll = scrollWithLocation("wrapper","10px","10px","0px","0px"); $("img").lazyload({ effect: "fadeIn", //加载图片使用的效果(淡入) threshold : 400 //在离可视区400px以内的图片也开始加载了，提升体验度 }); } /* iscroll 1、取消select,input,textarea等默认不可点击效果 2、解决iscroll。js和loadlazy.js冲突 */ function scroll(id){ var myScroll = new iScroll(id, { useTransform: false, onBeforeScrollStart: function (e) { var target = e.target; while (target.nodeType != 1) target = target.parentNode; //在iscroller里经常会有select,input等属性默认不可点击，阻止默认操作就可以点击了 if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA' && target.tagName != 'A') e.preventDefault(); }, onScrollMove: function(){ $("#"+id).trigger('scroll');//iscroller和loadlazy.js图片缓冲完毕后不能及时刷新，加上这个模拟浏览器被滑动，那么图片就可以刷新了 }, onScrollEnd: function(){ } }); return myScroll; } /* 初始化scroll， 1、设置id="wrapper"部分enscroll ( 参数依次是：id 上 右 下 左 （wrapper默认是position:absolute，overflow:hidden） scroller放在onload()里不容易出现界面混乱) 2、阻止浏览器默认滑动 */ function scrollWithLocation(id,top,right,bottom,left){ var wrapper = document.getElementById(id); wrapper.style.position = "absolute"; wrapper.style.top = top; wrapper.style.right = right; wrapper.style.bottom = bottom; wrapper.style.left = left; wrapper.style.overflow = "hidden"; document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);//阻止浏览器的默认滑动 return scroll(id); } </script> </html>
