图片的延迟加载

最新推荐文章于 2024-08-11 18:40:36 发布

????1996

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量289

点赞数

文章标签：延迟加载 html5 javascript css

本文链接：https://blog.csdn.net/zcm1457225624/article/details/53213951

版权

<!DOCTYPE html>

<html>

<head>

<title>图片延迟加载</title>

html,

body,

div,

img {

margin: 0;

padding: 0;

font-family: "微软雅黑";

-webkit-user-select: none;

}

img {

border: none;

display: block;

}

#box,

#box1 {

width: 500px;

height: 300px;

margin: 1000px auto 0;

background: url(img/default.gif)no-repeat center center #e1e1e1;

}

#box img,

#box1 img {

width: 500px;

height: 300px;

}

</style>

</head>

<body>

</div>

</div>

//作用：保证页面的加载速度一般加载速度超过三秒就判定为死亡页面

//原理：一般我们第一屏幕的图片我们上来先不加载而是给它一个背景图片(有时候我们会称它为占位图)一般大小维持在5KB以下

//等到第一屏幕的资源都加载完成后我们才开始加载真实图片或者有时候会通过给他一个延迟时间来实现

//其他屏幕的时候上来我们也是先不加载等到滚动条滚到对应位置的时候才开始加载

var oBox = document.getElementById("box");

var oImg = oBox.getElementsByTagName("img")[0];

var winHeight = utils.win("clientHeight");

var oBoxHeight = oBox.offsetHeight;

var oBoxTop = utils.offset(oBox).top;

//window.scroll=function(){}

function lazyLoad() {

var trueImg = oImg.getAttribute("photo");

//我们要考虑自定义属性存储的图片的地址是否为真实地址或是说能不能加载出来那么问题来了

//我们怎么判断能否加载出来我想到的是可以借助其他的img来试验一下如果能加载出来我们就把这个地址给页面上的那个img

var winScroll = utils.win("scrollTop");

if (oImg.trueLoad) {

return;

}

if ((winHeight + winScroll) >= (oBoxHeight + oBoxTop)) {

window.setTimeout(function() {

var curImg = document.createElement("img");

curImg.src = trueImg;

curImg.onload = function() {

//当curImg 加载成功后执行后面function函数

oImg.src = trueImg;

curImg = null;

}

}, 2000);

oImg.trueLoad = true;

}

//window.setTimeout(lazyLoad, 3000);

//window.οnlοad=lazyLoad;

window.onscroll = lazyLoad;

</script>

</body>

</html>

????1996

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片的延迟加载

DOCTYPE html>html>head>metacharset="UTF-8">title>图片延迟加载title>styletype="text/css">html,body,div,img {margin:0;padding:0;font-family:"微
复制链接

扫一扫