首页 > 代码库 > WAP 图片 lazyload

WAP 图片 lazyload

2024-07-08 19:50:00   229人阅读

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

1，先监听 scroll 事件

var threshold = 30    ,scrolling_ltwindow.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 = http://www.mamicode.com/img.getAttribute(‘asrc‘)        if (src){            img.removeAttribute(‘asrc‘)            img.innerHTML = ‘<img src=http://www.mamicode.com/‘+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)

 

 

 


联系
我们