php延时加载,php如何实现图片延时加载

php实现图片延时加载的方法：在到达指定加载图片位置时，用data-src属性值替换img的src属性值即可，如【imgs[i].src = imgs[i].getAttribute('data-src');】。

在到达指定加载图片位置时，用data-src的属性值替换img的src的属性值即可，这个时候img就会去请求资源。

(推荐教程：php视频教程)imgs[i].src = imgs[i].getAttribute('data-src');

代码实现：

图片懒加载

img {

display: block;

width: 100%;

height: 300px;

margin-bottom: 20px;

}

var imgs = document.querySelectorAll('img');

//offsetTop是元素与offsetParent的距离，循环获取直到页面顶部

function getTop(e) {

var T = e.offsetTop;

while(e = e.offsetParent) {

T += e.offsetTop;

}

return T;

}

function lazyLoad(imgs) {

var H = document.documentElement.clientHeight;//获取可视区域高度

var S = document.documentElement.scrollTop || document.body.scrollTop;

for (var i = 0; i < imgs.length; i++) {

if (H + S > getTop(imgs[i])) {

imgs[i].src = imgs[i].getAttribute('data-src');

}

}

}

window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发

lazyLoad(imgs);

}

相关推荐：php培训