JS实现非首屏图片延迟加载的示例(2)

function lazyLoad(imgs,offset){ offset = offset || 100; if (!imgs || imgs.length < 1) { console.log('imgs为空'); return ; } [].slice.call(imgs).forEach(function(element,index){ //元素的DomRect var rect = element.getBoundingClientRect() //出现在视窗中 if (rect.top <= window.innerHeight + offset && rect.right > 0) { element.setAttribute('src',element.getAttribute('data-src')) } }) }

通过window.innerHeight获取到视窗的高度，当元素距离视窗上边沿为offset时，加载图片；其中offset为指定的偏移距离。

节流函数如下

function throttle (fn, delay, atleast) { let timer = null let startTime = new Date() return function () { let context = this let args = arguments let curTime = new Date() clearTimeout(timer) if (curTime - startTime >= atleast) { fn.apply(context, args) // apply 指定函数指向的 上下文(this) 和 参数列表 startTime = curTime } else { timer = setTimeout(function () { fn.apply(context, args) startTime = curTime }, delay) } } }

效果

页面载入完成，只加载了一张图片

向下滚动到指定位置，才会依次加载后续图片

以上这篇JS实现非首屏图片延迟加载的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章: