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

原帖地址：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，转载请注明。