标签：
<body>
<button>加载图片</button>
<img src="test.png" alt="测试" data-original = "test2.png">
<script>
var oBtn = document.getElementsByTagName(‘button‘)[0];
var oImg = document.images[0];
//延迟加载，给图片加了 载入事件
function aftLoadImg(obj, url){
var oImg = new Image();
oImg.onload = function(){
obj.src = oImg.src;
}
oImg.src = url;
}
oBtn.onclick = function(){
oImg.src = "test2.png"; // 如果图片不是很大，就直接改一下src就可以了，
for (var pro in oImg.dataset) { //这里证明，dataset里面有一个orignial属性，是test2.png。
document.write(pro + " " +oImg.dataset[pro] + "</br>");
//会打印出 original test2.png
}
//如果觉得图片有点大，就直接加载一个事件，上面已经说明过，图像是有onload事件的，等加载完毕后在显示。
if(oImg.dataset){ //是否可以获取dataset属性。
aftLoadImg(oImg, oImg.dataset.original);
}
else{
aftLoadImg(oImg,oImg.getAttribute("data-original"));
}
}
</script>
</body>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
b. 需要懒加载的图片， ①.增加 data-original="图片真实地址"
②.页面所有的img标签的src属性指向同一个图片(图片未加载时，显示的一张临时图)
③.图片一定要设置 width 与 height
注意：这点你可能没办法接受，因为需要改变你的html
<img src="img/grey.gif" data-original="img/example.jpg" width="640" height="480">
$("img.lazy").lazyload();
标签：
原文地址：http://www.cnblogs.com/hgonlywj/p/4860493.html
