图片懒加载

页面标签设置

开始是通过src实现的，这样只是实现了懒加载，而服务器端依然会传送这个10000张图片，没有实现懒传送，浪费带宽

<img src="loading.gif"data-src="http://xxx.ooo.com" />

现在的实现方式是

   <img class="lazy" data-original="img/example.jpg"width="640" height="480">

添加了一个data-original属性，这样浏览器滚动到图片所在位置时服务器才会加载图片，实现了懒传送，这时候减轻服务器负担。

关键点

1、页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片（也就没有请求咯，可以提高性能），一旦通过javascript设置了图片路径，浏览器才会送请求。有点按需分配的意思。

2、如何获取正真的路径，这个简单，现在真正的路径存在元素的“data-original”属性里，要用的时候就取出来，再设置；

3、开始比较之前，先了解一些基本的知识，比如说如何获取某个元素的尺寸大小、滚动条滚动距离及偏移位置距离；

位置判断

参考http://www.tuicool.com/articles/rUjIZzb

基本原理：