iscroll.js和lazyload.js的兼容（滑动时，缓冲好的图片不更新）

最新推荐文章于 2021-10-28 20:53:26 发布

weixin_33725515

最新推荐文章于 2021-10-28 20:53:26 发布

阅读量257

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 移动开发 ViewUI

原文链接：https://segmentfault.com/a/1190000008690841

本文介绍了解决iscroll.js与jquery.lazyload.js在移动端网页中出现的兼容性问题的方法，通过模拟滚动事件确保图片正确加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以前在做项目的时候，把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>