网页中的图片实现按需加载（滚动条下拉加载）。
效果如下：可以看到，随着滚动条的下拉，图片资源请求有了变化。
实现此功能需要思考的部分：
如何认定某张图片需要进行加载，加载的必要条件是什么？
动态截图中可以看到，图片进入了狭窄的可视区（被控制台视区挤压了）就会被加载了，那么：
网页中的图片都有自己距离浏览器窗口顶部的距离，这部分距离可以直接用属性取出：图片距离，img.offsetTop。
通过判断图片是否进入了可视区即可得出该图片是否应该被加载，一张图解释图片有没有进入可视区：
可视区范围+滚动条滚动距离： 可视区范围（clientHeight） 滚动条滚动距离（scrolltop）
如果图片距离浏览器顶部距离小于可视区范围+滚动条滚动距离，那么该图片应该被加载。
其实核心部分就是判断 img.offsetTop < clientHeight+scrolltop.
主要思路就是这样，代码部分如下。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"View Code
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html>
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
6 <title>Mking_js_</title>
7
8 <style type="text/css">
9 ul{ margin: 100px auto; padding: 0; overflow: hidden; }
10 li{ float: left; list-style: none; margin: 0 0 10px 10px; border: 1px solid #000000;}
11 img{ width:280px; height: 150px; }
12 </style>
13
14 <script type="text/javascript">
15 window.onload = function(){
16 var oUl = document.getElementById("ul1");
17 var aImgs = oUl.getElementsByTagName("img");
18 scroll();
19 window.onscroll = scroll;
20 var i = 0;
21 function scroll(){
22 var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
23 var clientHeight = document.documentElement.clientHeight; //获取可视区的高
24 //alert(iScrollTop+'**'+clientHeight);
25
26 for(var i=0;i<aImgs.length;i++){
27 //图片距离顶部的距离小于滚动条滚动的距离+可视区的距离，则图片进入可视区范围，
28 // 更改图片的scr
29 if(!aImgs[i].isload && getTop(aImgs[i]) < iScrollTop+clientHeight){
30 aImgs[i].src = aImgs[i].getAttribute("_src");
31 aImgs[i].isload = true;
32 }
33 }
34 }
35
36
37 function getTop(obj){
38 var iTop = 0;
39 while(obj){
40 iTop += obj.offsetTop;
41 obj = obj.offsetParent;
42 }
43 return iTop;
44 }
45 };
46 </script>
47 </head>
48 <body>
49 <ul id="ul1">
50 <li><img _src="img/1.jpg" src="img/white.jpg"/></li>
51 <li><img _src="img/2.jpg" src="img/white.jpg"/></li>
52 <li><img _src="img/3.jpg" src="img/white.jpg"/></li>
53 <li><img _src="img/4.jpg" src="img/white.jpg"/></li>
54 <li><img _src="img/5.jpg" src="img/white.jpg"/></li>
55 <li><img _src="img/6.jpg" src="img/white.jpg"/></li>
56 <li><img _src="img/7.jpg" src="img/white.jpg"/></li>
57 <li><img _src="img/1.jpg" src="img/white.jpg"/></li>
58 <li><img _src="img/2.jpg" src="img/white.jpg"/></li>
59 <li><img _src="img/3.jpg" src="img/white.jpg"/></li>
60 <li><img _src="img/4.jpg" src="img/white.jpg"/></li>
61 <li><img _src="img/5.jpg" src="img/white.jpg"/></li>
62 <li><img _src="img/6.jpg" src="img/white.jpg"/></li>
63 <li><img _src="img/7.jpg" src="img/white.jpg"/></li>
64 <li><img _src="img/1.jpg" src="img/white.jpg"/></li>
65 <li><img _src="img/2.jpg" src="img/white.jpg"/></li>
66 <li><img _src="img/3.jpg" src="img/white.jpg"/></li>
67 <li><img _src="img/4.jpg" src="img/white.jpg"/></li>
68 <li><img _src="img/5.jpg" src="img/white.jpg"/></li>
69 <li><img _src="img/6.jpg" src="img/white.jpg"/></li>
70 <li><img _src="img/7.jpg" src="img/white.jpg"/></li>
71 <li><img _src="img/1.jpg" src="img/white.jpg"/></li>
72 <li><img _src="img/2.jpg" src="img/white.jpg"/></li>
73 <li><img _src="img/3.jpg" src="img/white.jpg"/></li>
74 <li><img _src="img/4.jpg" src="img/white.jpg"/></li>
75 <li><img _src="img/5.jpg" src="img/white.jpg"/></li>
76 <li><img _src="img/6.jpg" src="img/white.jpg"/></li>
77 <li><img _src="img/7.jpg" src="img/white.jpg"/></li>
78 <li><img _src="img/1.jpg" src="img/white.jpg"/></li>
79 <li><img _src="img/2.jpg" src="img/white.jpg"/></li>
80 <li><img _src="img/3.jpg" src="img/white.jpg"/></li>
81 <li><img _src="img/4.jpg" src="img/white.jpg"/></li>
82 <li><img _src="img/5.jpg" src="img/white.jpg"/></li>
83 <li><img _src="img/6.jpg" src="img/white.jpg"/></li>
84 <li><img _src="img/7.jpg" src="img/white.jpg"/></li>
85 <li><img _src="img/1.jpg" src="img/white.jpg"/></li>
86 <li><img _src="img/2.jpg" src="img/white.jpg"/></li>
87 <li><img _src="http://photo.enterdesk.com/2008-6-21/200806211628314920.jpg" src="img/white.jpg"/></li>
88 <li><img _src="img/3.jpg" src="img/white.jpg"/></li>
89 <li><img _src="img/4.jpg" src="img/white.jpg"/></li>
90 <li><img _src="img/5.jpg" src="img/white.jpg"/></li>
91 <li><img _src="img/6.jpg" src="img/white.jpg"/></li>
92 <li><img _src="img/7.jpg" src="img/white.jpg"/></li>
93 <li><img _src="img/1.jpg" src="img/white.jpg"/></li>
94 <li><img _src="img/2.jpg" src="img/white.jpg"/></li>
95 <li><img _src="img/3.jpg" src="img/white.jpg"/></li>
96 <li><img _src="img/4.jpg" src="img/white.jpg"/></li>
97 <li><img _src="img/5.jpg" src="img/white.jpg"/></li>
98 <li><img _src="img/6.jpg" src="img/white.jpg"/></li>
99 <li><img _src="img/7.jpg" src="img/white.jpg"/></li>
100 <li><img _src="img/1.jpg" src="img/white.jpg"/></li>
101 <li><img _src="img/2.jpg" src="img/white.jpg"/></li>
102 <li><img _src="img/3.jpg" src="img/white.jpg"/></li>
103 <li><img _src="img/4.jpg" src="img/white.jpg"/></li>
104 <li><img _src="img/5.jpg" src="img/white.jpg"/></li>
105 <li><img _src="img/6.jpg" src="img/white.jpg"/></li>
106 <li><img _src="img/7.jpg" src="img/white.jpg"/></li>
107 <li><img _src="img/1.jpg" src="img/white.jpg"/></li>
108 <li><img _src="img/2.jpg" src="img/white.jpg"/></li>
109 <li><img _src="img/3.jpg" src="img/white.jpg"/></li>
110 <li><img _src="img/4.jpg" src="img/white.jpg"/></li>
111 <li><img _src="img/5.jpg" src="img/white.jpg"/></li>
112 <li><img _src="img/6.jpg" src="img/white.jpg"/></li>
113 <li><img _src="img/7.jpg" src="img/white.jpg"/></li>
114 <li><img _src="img/1.jpg" src="img/white.jpg"/></li>
115 <li><img _src="img/2.jpg" src="img/white.jpg"/></li>
116 <li><img _src="img/3.jpg" src="img/white.jpg"/></li>
117 <li><img _src="img/4.jpg" src="img/white.jpg"/></li>
118 <li><img _src="img/5.jpg" src="img/white.jpg"/></li>
119 <li><img _src="img/6.jpg" src="img/white.jpg"/></li>
120 <li><img _src="img/7.jpg" src="img/white.jpg"/></li>
121 <li><img _src="img/1.jpg" src="img/white.jpg"/></li>
122 <li><img _src="img/2.jpg" src="img/white.jpg"/></li>
123 <li><img _src="img/3.jpg" src="img/white.jpg"/></li>
124 <li><img _src="img/4.jpg" src="img/white.jpg"/></li>
125 <li><img _src="img/5.jpg" src="img/white.jpg"/></li>
126 <li><img _src="img/6.jpg" src="img/white.jpg"/></li>
127 <li><img _src="img/7.jpg" src="img/white.jpg"/></li>
128 <li><img _src="img/1.jpg" src="img/white.jpg"/></li>
129 <li><img _src="img/2.jpg" src="img/white.jpg"/></li>
130 <li><img _src="img/3.jpg" src="img/white.jpg"/></li>
131 <li><img _src="img/4.jpg" src="img/white.jpg"/></li>
132 <li><img _src="img/6.jpg" src="img/white.jpg"/></li>
133 <li><img _src="img/7.jpg" src="img/white.jpg"/></li>
134 <li><img _src="img/1.jpg" src="img/white.jpg"/></li>
135 <li><img _src="img/2.jpg" src="img/white.jpg"/></li>
136 <li><img _src="img/3.jpg" src="img/white.jpg"/></li>
137 <li><img _src="img/4.jpg" src="img/white.jpg"/></li>
138 <li><img _src="img/5.jpg" src="img/white.jpg"/></li>
139 <li><img _src="img/6.jpg" src="img/white.jpg"/></li>
140 <li><img _src="img/7.jpg" src="img/white.jpg"/></li>
141 <li><img _src="img/1.jpg" src="img/white.jpg"/></li>
142 <li><img _src="img/2.jpg" src="img/white.jpg"/></li>
143 <li><img _src="img/3.jpg" src="img/white.jpg"/></li>
144 <li><img _src="img/4.jpg" src="img/white.jpg"/></li>
145 <li><img _src="img/5.jpg" src="img/white.jpg"/></li>
146 <li><img _src="img/6.jpg" src="img/white.jpg"/></li>
147 <li><img _src="img/7.jpg" src="img/white.jpg"/></li>
148 </ul>
149 </body>
150 </html>