码迷,mamicode.com
首页 > 其他好文 > 详细

WAP 图片 lazyload

时间:2014-06-20 19:08:18      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   code   color   get   

原理是根据屏幕上的坐标找到需要做 lazyload 的区域

1,先监听 scroll 事件

var threshold = 30
    ,scrolling_lt
window.addEventListener(scroll, function(){
    scrolling_lt = new Date
    window.setTimeout(function(){
        if (new Date - scrolling_lt < threshold) return
        console.log(scroll stop)
        getEleToLoad()


        }, threshold)
} , false)

 

 

2 设置扫描线路

var scaneArea = (function(){
    var area = []
        ,w = document.body.clientWidth
        ,h = document.body.clientHeight
        ,column = 20
        ,space = [Math.round(w / column) , Math.round(h / column)]
    for (var i = 1 ; i < column * .4; i ++) {
        area.push([space[0] * i , space[1] * i ])
        area.push([space[0] * i , h - space[1] * i ])
        area.push([w - space[0] * i , space[1] * i ])
        area.push([w - space[0] * i , h - space[1] * i ])
        }

    return area
    })()

 

3 获取元素,并显示

function toLoad(imgs){
    function loadIt(){
        var img = imgs.shift()
        if (!img) return
        var src = img.getAttribute(asrc)
        if (src){
            img.removeAttribute(asrc)
            img.innerHTML = <img src=+src+ />
            }
        window.setTimeout(loadIt , 200)
        }
    loadIt()
    }
function getEleToLoad(){
    var imgs = []
        ,d
        ,findOne = false
    scaneArea.forEach(function(pos){
        var ele = document.elementFromPoint(pos[0] , pos[1])
        if (!ele || d === ele || ele.dataset.scaned) return
        ele.dataset.scaned = 1
        d = ele
        if (ele.className.indexOf(lazy) > -1 ) {
            if (findOne)
                return imgs.push(ele)
            else {
                toLoad([ele])
                findOne = true
                }
            }
        })
    toLoad(imgs)
    }
window.setTimeout(getEleToLoad , 20)

 

 

 

WAP 图片 lazyload,布布扣,bubuko.com

WAP 图片 lazyload

标签:style   class   blog   code   color   get   

原文地址:http://www.cnblogs.com/vaal-water/p/3796315.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!