原生Js页面滚动延迟加载图片 - dtdxrk - 我的技术资料收集库

wyqj

浏览: 83745 次

最近访客更多访客>>

贫僧稽首了

likunran521

wxn_yxm

yangyi336

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

原生Js页面滚动延迟加载图片 - dtdxrk

博客分类：

Js封装的插件/实例/方法

资料收集

原帖地址：http://www.cnblogs.com/dtdxrk/p/3151001.html

原理和过程
1.页面滚动加载事件
2.获取元素在页面里的top值根据滚动条的位置判断何时显示图片
3.获取元素集合加载过的图片从集合里删除

效果预览：http://jsfiddle.net/dtdxrk/SkYNq/embedded/result/

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>原生Js页面滚动延迟加载图片</title>
6 <style type="text/css">
7 *{margin: 0;padding: 0}
8 img.scrollLoading{border: 1px solid #ccc;display: block;margin-top: 10px;}
9 </style>
10 </head>
11 <body>
12
13 <div id="content"></div>
14
15 </body>
16 </html>
17
18 <script type="text/javascript">
19 var _CalF = {
20 $ : function(object){//选择器
21 if(object === undefined ) return;
22 var getArr = function(name,tagName,attr){
23 var tagName = tagName || '*',
24 eles = document.getElementsByTagName(tagName),
25 clas = (typeof document.body.style.maxHeight === "undefined") ? "className" : "class";//ie6
26 attr = attr || clas,
27 Arr = [];
28 for(var i=0;i<eles.length;i++){
29 if(eles[i].getAttribute(attr)==name){
30 Arr.push(eles[i]);
31 }
32 }
33 return Arr;
34 };
35
36 if(object.indexOf('#') === 0){ //#id
37 return document.getElementById(object.substring(1));
38 }else if(object.indexOf('.') === 0){ //.class
39 return getArr(object.substring(1));
40 }else if(object.match(/=/g)){ //attr=name
41 return getArr(object.substring(object.search(/=/g)+1),null,object.substring(0,object.search(/=/g)));
42 }else if(object.match(/./g)){ //tagName.className
43 return getArr(object.split('.')[1],object.split('.')[0]);
44 }
45 },
46 getPosition : function(obj) { //获取元素在页面里的位置和宽高
47 var top = 0,
48 left = 0,
49 width = obj.offsetWidth,
50 height = obj.offsetHeight;
51
52 while(obj.offsetParent){
53 top += obj.offsetTop;
54 left += obj.offsetLeft;
55 obj = obj.offsetParent;
56 }
57
58 return {"top":top,"left":left,"width":width,"height":height};
59 }
60 };
61
62
63 //添加图片list
64 var _temp = [];
65 for (var i = 1; i < 21; i ++) {
66 _temp.push('<img class="scrollLoading" data-src="http://images.cnblogs.com/cnblogs_com/Darren_code/311197/o_' + i + '.jpg" src="loading.gif" /><br />图片' + i);
67 }
68 _CalF.$("#content").innerHTML = _temp.join("");
69
70
71 function scrollLoad(){
72 this.init.apply(this, arguments);
73 }
74
75 scrollLoad.prototype ={
76 init : function(className){
77 var className = "img."+className,
78 imgs = _CalF.$(className),
79 that = this;
80 this.imgs = imgs;
81 that.loadImg();
82 window.onscroll = function(){
83 that.time = setTimeout(function(){
84 that.loadImg();
85 },400);
86 }
87 },
88 loadImg : function(){
89 var imgs = this.imgs.reverse(), //获取数组翻转
90 len = imgs.length;
91
92 if(imgs.length===0){
93 clearTimeout(this.time);
94 return;
95 }
96 for(var j=len-1;j>=0;j--){ //递减
97 var img = imgs[j],
98 imgTop = _CalF.getPosition(imgs[j]).top,
99 imgSrc = img.getAttribute("data-src"),
100 offsetPage = window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop,//滚动条的top值
101 bodyHeight = document.documentElement.clientHeight; //body的高度
102 if((offsetPage+bodyHeight/2) > (imgTop-bodyHeight/2)){
103 img.src = imgSrc;
104 this.imgs.splice(j,1);
105 }
106 }
107 }
108 }
109
110
111 var img1 = new scrollLoad("scrollLoading");
112
113 </script>

本文链接：http://www.cnblogs.com/dtdxrk/p/3151001.html，转载请注明。

分享到：