WAP 图片 lazyload

原理是根据屏幕上的坐标找到需要做 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)

 

 

 

转载于:https://www.cnblogs.com/vaal-water/p/3796315.html