分享：
一些大型网站经常会用到的图片延时加载特效代码，用原生JS编写的一款广告代码。
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片延时加载原生JS特效广告代码-www.jb200.com</title>
<style type="text/css">
body,div,ul,li{margin:0;padding:0;}
#box{width:770px;margin:0 auto;padding:10px 0 0 10px;background:#f00;overflow:hidden;zoom:1;}
#box li{float:left;width:375px;height:225px;color:#fff;padding:10px 0;display:inline;text-align:center;margin:0 10px 10px 0;
background:#000 url(http://js.jb200.com/demo/yc/img/loading.gif) 50% 50% no-repeat;}
#box li img.loaded{width:353px;height:225px;vertical-align:middle;}
</style>
</head>
<script type="text/javascript">
var fgm = {
on: function(element, type, handler) {
return element.addEventListener ? element.addEventListener(type, handler, false) : element.attachEvent("on" + type, handler)
},
bind: function(object, handler) {
return function() {
return handler.apply(object, arguments)
}
},
pageX: function(element) {
return element.offsetLeft + (element.offsetParent ? arguments.callee(element.offsetParent) : 0)
},
pageY: function(element) {
return element.offsetTop + (element.offsetParent ? arguments.callee(element.offsetParent) : 0)
},
hasClass: function(element, className) {
return new RegExp("(^|s)" + className + "(s|$)").test(element.className)
},
attr: function(element, attr, value) {
if(arguments.length == 2) {
return element.attributes[attr] ? element.attributes[attr].nodeValue : undefined
}
else if(arguments.length == 3) {
element.setAttribute(attr, value)
}
}
};
//延时加载
function LazyLoad(obj) {
this.lazy = typeof obj === "string" ? document.getElementById(obj) : obj;
this.aImg = this.lazy.getElementsByTagName("img");
this.fnLoad = fgm.bind(this, this.load);
this.load();
fgm.on(window, "scroll", this.fnLoad);
fgm.on(window, "resize", this.fnLoad);
}
LazyLoad.prototype = {
load: function() {
var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var iClientHeight = document.documentElement.clientHeight + iScrollTop;
var i = 0;
var aParent = [];
var oParent = null;
var iTop = 0;
var iBottom = 0;
var aNotLoaded = this.loaded(0);
if(this.loaded(1).length != this.aImg.length) {
for(i = 0; i < aNotLoaded.length; i++) {
oParent = aNotLoaded[i].parentElement || aNotLoaded[i].parentNode;
iTop = fgm.pageY(oParent);
iBottom = iTop + oParent.offsetHeight;
if((iTop > iScrollTop && iTop < iClientHeight) || (iBottom > iScrollTop && iBottom < iClientHeight)) {
aNotLoaded[i].src = fgm.attr(aNotLoaded[i], "data-img") || aNotLoaded[i].src;
aNotLoaded[i].className = "loaded";
}
}
}
},
loaded: function(status) {
var array = [];
var i = 0;
for(i = 0; i < this.aImg.length; i++)
eval("fgm.hasClass(this.aImg[i], "loaded")" + (!!status ? "&&" : "||") + "array.push(this.aImg[i])");
return array
}
};
//应用
fgm.on(window, "load", function () {new LazyLoad("box")});
</script>
<body>
<ul id="box">
<li><img src="http://js.jb200.com/demo/yc/img/none.gif" data-img="http://js.jb200.com/demo/mobileapp_website/demo.jpg" /></li>
<li><img src="http://js.jb200.com/demo/yc/img/none.gif" data-img="http://js.jb200.com/demo/HoverSlideEffect/demo.jpg" /></li>
<li><img src="http://js.jb200.com/demo/yc/img/none.gif" data-img="http://js.jb200.com/demo/FullPageImageGallery/demo.jpg" /></li>
<li><img src="http://js.jb200.com/demo/yc/img/none.gif" data-img="http://js.jb200.com/demo/CompactNewsPreviewer/demo.jpg" /></li>
<li><img src="http://js.jb200.com/demo/yc/img/none.gif" data-img="http://js.jb200.com/demo/slideshow/demo.jpg" /></li>
<li><img src="http://js.jb200.com/demo/yc/img/none.gif" data-img="http://js.jb200.com/demo/ParallaxSlider/demo.jpg" /></li>
<li><img src="http://js.jb200.com/demo/yc/img/none.gif" data-img="http://js.jb200.com/demo/AnimatedPortfolioGallery/demo.jpg" /></li>
<li><img src="http://js.jb200.com/demo/yc/img/none.gif" data-img="http://js.jb200.com/demo/CollapsingSiteNavigation/demo.jpg" /></li>
<li><img src="http://js.jb200.com/demo/yc/img/none.gif" data-img="http://js.jb200.com/demo/ElegantAccordion/demo.jpg" /></li>
<li><img src="http://js.jb200.com/demo/yc/img/none.gif" data-img="http://js.jb200.com/demo/ImageBoxes/demo.jpg" /></li>
<li><img src="http://js.jb200.com/demo/yc/img/none.gif" data-img="http://js.jb200.com/demo/zdn/demo.jpg" /></li>
<li><img src="http://js.jb200.com/demo/yc/img/none.gif" data-img="http://js.jb200.com/demo/730/730.jpg" /></li>
<li><img src="http://js.jb200.com/demo/yc/img/none.gif" data-img="http://js.jb200.com/demo/729/729.jpg" /></li>
<li><img src="http://js.jb200.com/demo/yc/img/none.gif" data-img="http://js.jb200.com/demo/728/728.jpg" /></li>
<li><img src="http://js.jb200.com/demo/yc/img/none.gif" data-img="http://js.jb200.com/demo/727/727.jpg" /></li>
<li><img src="http://js.jb200.com/demo/yc/img/none.gif" data-img="http://js.jb200.com/demo/726/726.jpg" /></li>
<li><img src="http://js.jb200.com/demo/yc/img/none.gif" data-img="http://js.jb200.com/demo/725/725.jpg" /></li>
<li><img src="http://js.jb200.com/demo/yc/img/none.gif" data-img="http://js.jb200.com/demo/724/724.jpg" /></li>
<li><img src="http://js.jb200.com/demo/yc/img/none.gif" data-img="http://js.jb200.com/demo/723/723.jpg" /></li>
<li><img src="http://js.jb200.com/demo/yc/img/none.gif" data-img="http://js.jb200.com/demo/722/722.jpg" /></li>
<li><img src="http://js.jb200.com/demo/yc/img/none.gif" data-img="http://js.jb200.com/demo/721/721.jpg" /></li>
<li><img src="http://js.jb200.com/demo/yc/img/none.gif" data-img="http://js.jb200.com/demo/720/720.jpg" /></li>
<li><img src="http://js.jb200.com/demo/yc/img/none.gif" data-img="http://js.jb200.com/demo/719/719.jpg" /></li>
<li><img src="http://js.jb200.com/demo/yc/img/none.gif" data-img="http://js.jb200.com/demo/718/718.jpg" /></li>
<li><img src="http://js.jb200.com/demo/yc/img/none.gif" data-img="http://js.jb200.com/demo/717/717.jpg" /></li>
<li><img src="http://js.jb200.com/demo/yc/img/none.gif" data-img="http://js.jb200.com/demo/716/716.jpg" /></li>
<li><img src="http://js.jb200.com/demo/yc/img/none.gif" data-img="http://js.jb200.com/demo/715/715.jpg" /></li>
<li><img src="http://js.jb200.com/demo/yc/img/none.gif" data-img="http://js.jb200.com/demo/714/714.jpg" /></li>
</ul>
</body>
</html>