WAP 图片 lazyload

bamuai7645

于 2014-06-19 13:06:00 发布

阅读量76

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/vaal-water/p/3796315.html

本文介绍了一种基于屏幕坐标和监听滚动事件的懒加载技术实现方案。通过设置扫描线路和获取元素，实现图片按需加载，有效提升网页加载速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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