iscroll.js和lazyload.js的兼容（滑動時，緩衝好的圖片不更新）

時間 2019-12-07

標籤 iscroll.js iscroll lazyload.js lazyload 兼容滑動緩衝好的圖片更新欄目 JavaScript 简体版

原文原文鏈接

之前在作項目的時候，把jquery.lazyload.js和iscroll.js一塊兒使用，當滑動頁面的時候，iscroll的滑動效果出來了，可是圖片懶加載的效果沒出來，主要是由於圖片緩衝完畢後不能及時刷新
解決二者兼容問題操做：javascript

一、（iscroll.js和lazyload.js的兼容（滑動時，緩衝好的圖片不更新））：html

onScrollMove: function(){
    $("#"+id).trigger('scroll');//iscroller和loadlazy.js圖片緩衝完畢後不能及時刷新，加上這個模擬瀏覽器被滑動，那麼圖片就能夠刷新了
}

原理是：只要瀏覽器滾動，那麼圖片就會刷新，因此在scroll滾動時模擬瀏覽器滾動，這個問題就解決了。
另外個人這段代碼可謂神來之筆，你們好好看看java

二、node

//這一步很重要，不然圖片不能完成緩衝效果（原理：在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三個庫。jquery

<!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
        一、取消select,input,textarea等默認不可點擊效果
        二、解決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，
        一、設置id="wrapper"部分enscroll ( 參數依次是：id 上 右 下 左   （wrapper默認是position:absolute，overflow:hidden） scroller放在onload()裏不容易出現界面混亂)
        二、阻止瀏覽器默認滑動
    */
    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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。