以前在做项目的时候,把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三个库。
<!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>