标签: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
标签:style class blog code color get
原文地址:http://www.cnblogs.com/vaal-water/p/3796315.html