<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片延迟加载</title>
<style type="text/css">
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 id="box">
<img src="" photo="img/jd.jpg" />
</div>
<div id="box1">
<img src="" photo="img/jd.jpg" />
</div>
<script src="JS/utils.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//作用：保证页面的加载速度 一般加载速度超过三秒就判定为死亡页面
//原理：一般我们第一屏幕的图片我们上来先不加载 而是给它一个背景图片(有时候我们会称它为占位图)一般大小维持在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>
