可视区域加载图片(懒加载应用)

//        可视区域加载
        var aImages = document.images;//获取图片集合
        loadImg(aImages);
        window.onscroll = function(){
            loadImg(aImages);
        };
        function loadImg(arr){
            for( var i = 0,len = arr.length; i < len; i++){
                if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad){
                    arr[i].isLoad = true;
                    arr[i].style.cssText = "transition: ''; opacity: 0;"
                    if(arr[i].dataset){
                        aftLoadImg(arr[i],arr[i].dataset.url);    
                    }else{
                        aftLoadImg(arr[i],arr[i].getAttribute("data-url"));
                    }
                    (function(i){
                        setTimeout(function(){
                            arr[i].style.cssText = "transition: 1s; opacity: 1;"
                        },16)
                    })(i);
                }
            }
        }
        function aftLoadImg(obj,url){
            var oImg = new Image();
            oImg.onload = function(){
                obj.src = oImg.src;
            }
            oImg.src = url;
        }

安康响应式站

猜你喜欢

转载自www.cnblogs.com/mmy67/p/9908211.html