关于 图片延时加载的基本理论：
当我们浏览一个页面时，我们有时候并不会看完一个网页的所有内容，那么我们在客户不浏览完所有内容的情况下，加载完所有的图片就会浪费流量，而且也会影响到网页的加载时间。为了解决这个问题，我们就设计了一种图片延时加载的机制，即当用户将页面快滑到图片的时候，我们开始加载图片，这样既省了流量，而且也不影响用户的体验
下面 我就多篇延时加载举一个例子
首先，我们创建所需的HTML标签及样式
<style type="text/css">
body, div, img {
margin: 0;
padding: 0;
}
img {
border: none;
}
#con {
margin: 10px auto;
padding: 15px 0 15px 15px;
width: 630px;
border: 1px dashed #ff3333;
border-radius: 10px;
overflow: hidden;
}
#con div {
float: left;
margin: 15px 15px 0 0;
width: 300px;
height: 150px;
background: url("img/ddd.jpg") no-repeat;
}
#con div img {
width: 300px;
height: 150px;
opacity: 0;
}
</style>
</head>
<body>
<div id="con"></div>整体思路是这样的，我们先获取到装图片的大容器，然后创建装载每一个图片的div，让其占好位置，然后当用户滑动到当前这个div顶部的时候，开始加载图片。加载完成后 显示出来，为了防止图片多次加载，出现闪屏的效果，加载完图片后 我们添加一个标识 ，来防止我们多次加载
具体代码及注释如下
var date = [];
for (var i = 0; i < 100; i++) {
var ran = Math.round(Math.random() * 9 + 1);
date[date.length] = "img/" + ran + ".jpg";
}
//创建占位置的div；
var conBox = document.getElementById("con");
var frg = document.createDocumentFragment();
for (var i = 0; i < date.length; i++) {
var imgBox = document.createElement("div");
imgBox.trueSrc = date[i];
frg.appendChild(imgBox);
}
conBox.appendChild(frg);
//获取 浏览器的高度
function getWin(attr) {
return document.documentElement[attr] || document.body[attr];
}
//元素相对 浏览器的高度
function offset(ele) {
var h = ele.offsetTop;
var l = ele.offsetLeft;
var p = ele.offsetParent;
while (p) {
if (navigator.userAgent.indexOf("MSIE 8") > -1) {
h += p.offsetTop;
l += p.offsetLeft;
} else {
l += p.offsetLeft + p.clientLeft;
h += p.offsetTop + p.clientTop
}
p = p.offsetParent;
}
return {top: h, left: l};
}
//加载 图片方法
function move(oImg) {
var n = 0;
var timer = window.setInterval(function () {
oImg.style.opacity = n;
if (n > 0.99) {
oImg.style.opacity = 1;
clearInterval(timer);
}
n += 0.01;
}, 10)
}
function loadImg(imgBox) {
var oImg = new Image;
oImg.src = imgBox.trueSrc;
oImg.onload = function () {
imgBox.appendChild(oImg);
imgBox.loadOk = true;
move(oImg);
}
}
//给window绑定 方法
function start() {
var cur = getWin("scrollTop") + getWin("clientHeight");
var imgBox = conBox.getElementsByTagName("div");
for (var i = 0; i < imgBox.length; i++) {
var temp = imgBox[i];
console.log(imgBox.length);
if (cur > offset(temp).top) {
if (!temp.loadOk) {
loadImg(temp);
}
}
}
}
window.onload = start;
window.onscroll = start;版权声明：本文为博主原创文章，未经博主允许不得转载。
原文地址：http://blog.csdn.net/xiaotuimao/article/details/48048263
