js lazyload实现网页图片延迟加载特效代码下载


js lazyload实现网页图片延迟加载特效代码下载
js lazyload实现网页图片延迟加载特效代码下载以及网页图片、延迟加载等js/jquery网页特效代码下载。

1. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font-family:"helvetica neue",arial,sans-serif;font-size:12px;color:#444;}
.demo{width:840px;margin:0 auto;}
.demo h2{color:#3366cc;font-size:16px;margin:20px 0 0 0;}
/* showbox */
.showbox{float:left;margin:10px 9px;display:inline;}
.showpic{margin:20px 0;border:solid 1px #ddd;width:190px;font-size:12px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);-moz-box-shadow:0 1px 3px rgba(0,0,0,.3);-webkit-box-shadow:0 1px 3px rgba(0,0,0,.3);}
.showpic .picbox{padding:15px 15px 0;text-align:center;}
.showpic p{line-height:22px;margin:10px 0 0 0;padding:5px 10px;border-top:solid 1px #F5F2F2;background:#FAFAFA;}
</style>
<div class="demo">
	<h2>滚动条滚动 图片延迟加载</h2>
	<div style="height:700px;"></div>
	<div class="showbox">
		<div class="showpic">
			<div class="picbox">
				<a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="js树形导航菜单制作垂直js导航条特效" name="page_cnt_1" _src="images/small480f846f099a5892a0f1aee6170540ce.jpg" /></a>
			</div>
			<p>js树形导航菜单制作垂直js导航条特效</p>
		</div>
		<div class="showpic">
			<div class="picbox">
				<a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="js导航菜单左侧竖纵向二级导航菜单可点击展开与收缩子菜单" name="page_cnt_1" _src="images/small00da066c77f0ac26ff5aec5e5018feb5.jpg" /></a>
			</div>
			<p>js导航菜单左侧竖纵向二级导航菜单可点击展开与收缩子菜单</p>
		</div>
		<div class="showpic">
			<div class="picbox">
				<a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="flash图片特效3D立体动画焦点图片切换带左右按钮控制滚动" name="page_cnt_1" _src="images/smalld3fe5207f426ffea078c42aff95cfb13.jpg" /></a>
			</div>
			<p>flash图片特效3D立体动画焦点图片切换带左右按钮控制滚动</p>
		</div>
		<div class="showpic">
			<div class="picbox">
				<a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="flash焦点图片带内容与按钮的3D动画图片特效" name="page_cnt_1" _src="images/small46a2f920ee55bc8cfeab6d7bb75a4877.jpg" /></a>
			</div>
			<p>flash焦点图片带内容与按钮的3D动画图片特效</p>
		</div>
	</div>
	<div class="showbox">
		<div class="showpic">
			<div class="picbox">
				<a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="flash图片切换左右滚动带序列索引按钮控制flash动画图片特效" name="page_cnt_1" _src="images/small03c0020fa66f5a07b4ce0511dbe19331.jpg" /></a>
			</div>
			<p>flash图片切换左右滚动带序列索引按钮控制flash动画图片特效</p>
		</div>
		<div class="showpic">
			<div class="picbox">
				<a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="flash特效制作flash图片切换带有3D flash动画图片的切换效果" name="page_cnt_1" _src="images/smallfcfb4a9d8a54863c9e0b01d96d8ddcf1.jpg" /></a>
			</div>
			<p>flash特效制作flash图片切换带有3D flash动画图片的切换效果</p>
		</div>
		<div class="showpic">
			<div class="picbox">
				<a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="flash导航条制作一个鼠标滑过动画特效flash导航条源码下载" name="page_cnt_1" _src="images/smalleee9787ef98ca7eb735c3399a1d284d5.jpg" /></a>
			</div>
			<p>flash导航条制作一个鼠标滑过动画特效flash导航条源码下载</p>
		</div>
		<div class="showpic">
			<div class="picbox">
				<a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="flash导航条制作二级菜单子菜单的flash导航条源码" name="page_cnt_1" _src="images/smallee5978bd2682039e1d65aed3a8a02ab6.jpg" /></a>
			</div>
			<p>flash导航条制作二级菜单子菜单的flash导航条源码</p>
		</div>
	</div>
	<div class="showbox">
		<div class="showpic">
			<div class="picbox">
				<a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果" name="page_cnt_1" _src="images/small8937f779ac932d157fe04fe463b083d4.jpg" /></a>
			</div>
			<p>jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果</p>
		</div>
		<div class="showpic">
			<div class="picbox">
				<a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="制作CSS3和HTML5的一个单页网站模板" name="page_cnt_1" _src="images/small9727df127970a3483f5bb363707d0027.jpg" /></a>
			</div>
			<p>制作CSS3和HTML5的一个单页网站模板</p>
		</div>
		<div class="showpic">
			<div class="picbox">
				<a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3" name="page_cnt_1" _src="images/small6b87a0e9c81c16b2cd43bc4a2879c2d0.jpg" /></a>
			</div>
			<p>flash焦点图特效大图和小图按顺序切换效果,鼠标滑过小图对应大图3D flash图片切换效果,带左右按钮控制flash图片切换滚动。</p>
		</div>
		<div class="showpic">
			<div class="picbox">
				<a href="http://www.51qianduan.com/" target="_blank"><img width="150" height="150" alt="flash焦点图切换动画图片和标题文字配合显示含flash源码下载" name="page_cnt_1" _src="images/smallebd5b0ea178c42f9ac662086b9429f7c.jpg" /></a>
			</div>
			<p>flash焦点图切换效果带动画图片和标题文字显示切换过程,图片淡隐淡现flash特效简约性flash图片轮播含flash源码下载。</p>
		</div>
	</div>
	<div class="showbox">
		<div class="showpic">
			<div class="picbox">
				<a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="div+css教程网站建设门户网站和电子商务网站CSS样式表" name="page_cnt_1" _src="images/small376c7a03cb5dfb6f7435df7a9362dd7e.jpg" /></a>
			</div>
			<p>div+css教程网站建设门户网站和电子商务网站CSS样式表</p>
		</div>
		<div class="showpic">
			<div class="picbox">
				<a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动" name="page_cnt_1" _src="images/smalla4c7c67dec86de131924d9e69e745e18.jpg" /></a>
			</div>
			<p>div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动</p>
		</div>
		<div class="showpic">
			<div class="picbox">
				<a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="CSS如何定位工程" name="page_cnt_1" _src="images/small6428e2143c097f6aac4b7676eda4a966.jpg" /></a>
			</div>
			<p>CSS如何定位工程</p>
		</div>
		<div class="showpic">
			<div class="picbox">
				<a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="div+css菜单导航布局自适应宽度" name="page_cnt_1" _src="images/small90724ace6d59438a97501738fa883651.jpg" /></a>
			</div>
			<p>div+css菜单导航布局自适应宽度</p>
		</div>
	</div>
</div>
<script type="text/javascript">
(function(){
	var th=this;
	th.pageSize=1000;/* 每屏大概高度为1000px */
	th.pageQuotiety=0.5;/* 提前下载量 */
	th.imgName="page_cnt_";/* 图片通用名 */
	th.imgs=[];/* 每屏图片 [每屏所有图片,第一张图片,第一张图片绝对top:加载图片的top] */
	var B = {};/* Browser check */
	B.ua = window.navigator.userAgent.toLowerCase();
	B.ie = /msie/.test(B.ua);
	B.moz = /gecko/.test(B.ua);
	B.opera = /opera/.test(B.ua);
	B.safari = /safari/.test(B.ua);
	var $N=function(s,docu){
		var doc=docu?docu:document;
		return(typeof s=="object")?s:doc.getElementsByName(s);
	};
	th.getWindowSize=function(){
		var a={};
		if(window.self&&self.innerWidth){
			a.width=self.innerWidth;
			a.height=self.innerHeight;
			return a;
		}if(document.documentElement&&document.documentElement.clientHeight){
			a.width=document.documentElement.clientWidth;
			a.height=document.documentElement.clientHeight;
			return a;
		}
		a.width=document.body.clientWidth;
		a.height=document.body.clientHeight;
		return a;
	}
	th.getObjPosition=function(obj){
		var a={};
		a.x = obj.offsetLeft,a.y = obj.offsetTop;
		while(obj=obj.offsetParent){
			a.x += obj.offsetLeft;
			a.y += obj.offsetTop;
		}
		return a;
	}
	th._getPageScroll=function(){
		var s;
		if (typeof(window.pageYOffset)!="undefined"){
			s = window.pageYOffset;
		}else if (document.documentElement && document.documentElement.scrollTop){
			s = document.documentElement.scrollTop;
		}else if (document.body){
			s = document.body.scrollTop;
		}
		return s;
	}
	th._loadImages=function(a){
		if(!a)	return;
		var obj = a;
		if(typeof a == "string"){
			obj=$N(a);
		}for(var i=0;i<obj.length;i++){
			var s = obj[i];
			if(typeof s == "object"){
				if(s.getAttribute("_src")){
					s.setAttribute("src",s.getAttribute("_src"));
					s.removeAttribute("_src",0);
				}
			}
		}
		delete obj;
		obj=null;
	}
	th._loadAllImgs=function(){
		var i=0;
		while(th.imgs[i]){
			th._loadImages(th.imgs[i][0]);
			i++;
		}
	}
	th.getImgPosition=function(){
		var i=1;
		var p=$N(th.imgName+i);
		while(p&&p.length>0){
			var p=$N("page_cnt_"+i);
			var t=th.getImgLoadPosition(p[0]);
			th.imgs.push([p,p[0],t]);
			i++;
			p=$N(th.imgName+i);
		}
	}
	th.getImgLoadPosition=function(a){
		var t={imgTop:0,pageTop:0};
		if(a){
			var w=th.getWindowSize();
			t.imgTop=parseInt(th.getObjPosition(a).y);
			t.pageTop=parseInt((t.imgTop/1000-th.pageQuotiety)*1000);
		}
		return t;
	}
	th._addScrollEven=function(){
		if(B.ie){
			window.attachEvent("onscroll",th._scrollFn);
		}else{
			window.addEventListener("scroll",th._scrollFn,false);
		}
	}
	th._removeScrollEven=function(){
		if(B.ie){
			window.detachEvent("onscroll",th._scrollFn);
		}else{
			window.removeEventListener("scroll",th._scrollFn,false);
		}
	}
	th._scrollFn=function(){
		var y=th._getPageScroll();
		var w=th.getWindowSize().height;
		if(w==0){
			th._loadAllImgs();
			return;
		}
		var i=0;
		var j=0;
		while(th.imgs[i]){
			if(!( y+w < th.imgs[i][2].pageTop )){
				th._loadImages(th.imgs[i][0]);
				j++
			}
			i++;
			if(j>=th.imgs.length){
				th._removeScrollEven();
			}
		}
	}
	th.getImgPosition();
	th._addScrollEven();
	th._scrollFn();
})()
</script>

相关推荐

发表评论

相关文章