注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

isblog主页

或许不一定要做得最多,但一定要做得最好! 能力就是一种财富,积累越多,就越体现你

 
 
 

日志

 
 

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

2016-01-08 11:50:53|  分类: jquery学习 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
转自:http://www.makaidong.com/%E5%8D%9A%E5%AE%A2%E5%9B%AD%E6%96%87/58650.shtml

1、先给大家看个全的代码,复制粘贴可直接看到全部效果。

  若不能,请自行导入

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>

 

解决兼容问题的代码(iscroll.js 和lazyload.js 的兼容(滑动时,缓冲好的图片不更新)):

onscrollmove: function(){
                $("#"+id).trigger('scroll');//iscroller和loadlazy.js 图片缓冲完毕后不能及时刷新,加上这个模拟浏览器被滑动,那么图片就可以刷新了
            },

原理是:只要浏览器滚动,那么图片就会刷新,所以在scroll滚动时模拟浏览器滚动,这个问题就解决了。

另外我的这段代码可谓神来之笔,大家好好看看

  评论这张
 
阅读(356)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017