懒加载初步了解

实现关键点

1.页面中的img元素不直接设置src属性，而是储存在一个属性里，比如data-src。到需要它加载的时候才通过js设置src路径。
2.获取可视区域大小，元素的位置，滚动条滚动距离。

• 获取屏幕可视窗口的大小
  原生：document.innerHeight || document.documentElement.clientHeight
  jquery:$(window).height()
• 获取滚动条滚动的距离
  原生：window.pageYoffset || document.documentElement.scrollTop
  jquery:$(window).scrollTop();
• 获取元素的位置
  原生:用Element.getBoundingClientRect()方法

var box=document.getElementById('box');         // 获取元素

alert(box.getBoundingClientRect().top);         // 元素上边距离页面上边的距离

alert(box.getBoundingClientRect().right);       // 元素右边距离页面右边的距离

alert(box.getBoundingClientRect().bottom);      // 元素下边距离页面下边的距离

alert(box.getBoundingClientRect().left);        // 元素左边距离页面左边的距离

jquery:

$(obj).position().top;	 	// 元素上边距离页面上边的距离

$(obj).position().left;		// 元素右边距离页面左边的距离

$(obj).position().right;	// 元素右边距离页面右边的距离

$(obj).position().bottom;	// 元素下边距离页面下边的距离

3.根据可视区域大小，元素的位置，滚动条滚动距离判断元素是否在可视区域

jquery.lazyload使用方法

1.引入文件

2.定义图片结构

<img src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">
3.激活

$("img.lazy").lazyload();

其他属性：

• 提前加载
  $(“img.lazy”).lazyload({threshold:200})
• 自定义触发事件
  $(“img.lazy”).lazyload({event:“click”})
• 自定义显示效果
  $(“img.lazy”).lazyload({effect:“fadeIn”})