前端开发js实现图片延迟加载

网站前端开发之图片|web前端开发工程师图片|前端开发获取图片的网站

原理和实现方法

延迟加载是通过自定义属性，把真实的img地址存到自定义属性中，如data-url=”img”,而图片真正的src存的是loading的图片，如src=”loading.gif”，通过js来获取窗口的偏移量，当图片在窗口中的时候，再动态将data-url的值赋给src;
延迟加载的原理其实很简单的，因为浏览器解析html的时候，会把img中所有的src都加载，但是自定义属性中的图片是不会加载的，所有我们就采用了替换，这样浏览器刚打开页面加载的是loading的图标，而不是真正的图片，这样就能提高网站的加载速度。

实际项目应用中，可以先利用ajax先把图片的实际src赋给data-url，然后滚动带图片窗口时，在实时的替换img的src。

具体代码如下：

<!DOCTYPE html>

<html>

<head>

<title>web前端开发基础电子版教材：图片延迟加载</title>

<style>

img {

display: block;

width: 350px;

height: 245px;

background: url(data/attachment/album/201412/18/090710jlau0l5c0bauwv56.gif) center center no-repeat

}

</style>

</head>

<body>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

var obj = document.getElementsByClassName(“test”), i, t, h, timer;

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

obj[i].url = obj[i].getAttribute(“data-url”);

obj[i].o = obj[i].offsetTop;

obj[i].again = false; //防止浏览器一直加载图片，这样图片加载成功后，滚动浏览器的时候就不会再加载图片了；

}

h = document.documentElement.clientHeight || 900;

var test = function (obj) {

t = document.body.scrollTop || document.documentElement.scrollTop;

if (t + h > obj.o && obj.o > t) {

obj.src = obj.url;

obj.again = true;

}

window.onscroll = window.onload = function () {

clearTimeout(timer);

timer = setTimeout(function () {

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

if (!obj[i].again) {

test(obj[i]);

}

}, 500)

};

</script>

</body>

</html>

前端开发网站标题图片添加|前端开发中如何固定图片位置|前端开发如何制作psd图片大小

前端开发js实现图片延迟加载

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发