php图片可视加载,快速实现JS图片懒加载(可视区域加载)示例代码

js懒加载图片

如何提高网页加载速度？在网页中有许多img标签，这些标签就是图片，其属性src则是指向服务器地址，当浏览器从上往下读取到src标签中的地址时，浏览器就会开启线程，加载这张图片。而并不是等到整张页面都解析完成才加载图片。我们要做的就是加载用户可视范围内的图片。

js懒加载图片的目的

1.网页优化，提高网页加载速度

2.页面优化友好，提高SEO收录与排名

3.提高用户体验，减少服务器压力

实例代码如下：

图片懒加载(可视区域加载)

* {

padding: 0px;

margin: 0px;

}

html,

body {

width: 100%;

min-height: 100%;

}

#SB {

margin: 0;

padding: 0;

list-style: none;

}

#SB .in {

border: 1px solid red;

margin: 10px;

text-align: center;

height: 400px;

width: 400px;

float: left;

}

.in img {

border: none;

vertical-align: middle;

height: 400px;

width: 400px;

}

var aImages = document.getElementById("SB").getElementsByTagName('img'); //获取id为SB的文档内所有的图片

loadImg(aImages);

window.onscroll = function() { //滚动条滚动触发

loadImg(aImages);

};

//getBoundingClientRect 是图片懒加载的核心

function loadImg(arr) {

for(var i = 0, len = arr.length; i < len; i++) {

if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad) {

arr[i].isLoad = true; //图片显示标志位

//arr[i].style.cssText = "opacity: 0;";

(function(i) {

setTimeout(function() {

if(arr[i].dataset) { //兼容不支持data的浏览器

aftLoadImg(arr[i], arr[i].dataset.imgurl);

} else {

aftLoadImg(arr[i], arr[i].getAttribute("data-imgurl"));

}

arr[i].style.cssText = "transition: 1s; opacity: 1;" //相当于fadein

}, 500)

})(i);

}

}

}

function aftLoadImg(obj, url) {

var oImg = new Image();

oImg.onload = function() {

obj.src = oImg.src; //下载完成后将该图片赋给目标obj目标对象

}

oImg.src = url; //oImg对象先下载该图像

}

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。