您的位置：首页 > Web前端 > JavaScript

javascript 图片延迟加载

2015-07-30 17:53 726 查看

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
#div1 {
height: 200px;
background-color: #bbbbbb;
font-size: 100px;
}
</style>
</head>
<body style="height:3500px">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<img id="div1" src="../Img/4.png" realsrc="http://cdn1.gurucv.com/Reg/Images/person/person1.png" />

<script type="text/javascript">
//var ele = document.getElementById('div1');
var ele = document.getElementsByTagName('img').item(0);
function offset(ele) {
var t = ele.offsetTop;
var l = ele.offsetLeft;
var p = ele.offsetParent;
while (p) {
if (window.navigator.userAgent.indexOf('MSIE 8') > -1) {
l += p.offsetLeft;
t += p.offsetTop;
} else {
l += p.offsetLeft + p.clientLeft;
t += p.offsetTop + p.clientTop;;
}
p = p.offsetParent;
}
return { left: l, top: t };
}
var h = offset(ele).top + ele.offsetHeight;//这是这个元素底边距文档顶部的绝对偏移量
window.onscroll = function () {
var winBottom = (document.documentElement.scrollTop || document.body.scrollTop) + (document.documentElement.clientHeight || document.body.clientHeight);
if (h < winBottom) {
// ele.src = ele.realsrc; //自定义属性，不能用 ‘.’的方式去取
if (!ele.loaded) {
var realImg = ele.getAttribute('realsrc');
ele.src = '../Img/loading.jpg';

var tempImg = new Image;//等价于 document.createElement('img');
tempImg.src = realImg;//自动下载图片，自动去请求图片
/*
浏览器所有的外链资源，都是缓存
*/
tempImg.onload = function () {//只是被运行一次
ele.src = realImg;
ele.loaded = true;//标志属性
};
}
}
}
</script>
</body>>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航