目前，网络上各大论坛，尤其是一些图片类型的网站上，在图片加载时均采用了一种名为懒加载的方式，具体表现为，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片，从而节约了网络带宽和提高了初次加载的速度，具体实现的技术并不复杂，下面分别对其说明。
首先，在页面中准备一个id为div1的div,在这个div中放一个ul,ul中准备了一些li,然而这些li都有一个data-src的属性，准备着图片的地址，具体结构如下：
图片的动态加载就是通过读取li元素，然后获得li元素的data-src属性的值赋予动态创建的图片的src，从而实现了图片的创建。
那么怎么识别是否在可视区域呢？这里需要一个函数，能够实现获得当前元素距离网页顶部的距离！
当网页的滚动条滚动时要时时判断当前li的位置！
当页面加载完成以后要主动运行一下window.onscroll，从而获得当前可视范围内的图片。
另外，像这样的页面，障眼法和美化都是必须的，比如给每个li一个loading的图片作为背景，从而实现了当前图片正在加载的效果，美化工作就是做好合理的布局。
至此，一款目前网络盛行的懒加载图片技术即已完成，大家可以测试一下，另外，图片源也可以通过AJAX的方式来获得，这里只是提供一种思路，大家可以自由发挥啦~~~~~~~。
from:http://blog.csdn.net/pvfhv/article/details/6176099