/ 月溅星河长路漫漫 / 懒加载的原理及插件

懒加载的原理及插件

2016-10-26 posted in [How To Do]

懒加载也称为延迟加载,即在需要的时候才加载。

1. 懒加载的实现原理

图片懒加载的思路:

  1. 提前设定好图片的宽、高(或用默认图片占位)

  2. 不设置图片的src属性,把图片的地址存储到data-src属性里

  3. 判断当前屏幕的位置,把当前屏幕内的图片的src属性设置为data-src的值

2. 图片懒加载的代码

<script>
	var sh = window.innerHeight;//获取屏幕的高度
	var imgs = document.querySelectorAll("img");//获取图片
	window.onscroll = lazyLoad;//滚动鼠标执行懒加载

	lazyLoad();//初始加载

	function lazyLoad(){
		var st = document.documentElement.scrollTop||document.body.scrollTop;//获取滚动的top坐标
		var sn = st+sh;//屏幕的可视区域

		for(var i = 0; i<imgs.length;i++){
			if(imgs[i].offsetTop<=sn){
				imgs[i].src = imgs[i].getAttribute("data-src");
			}
		}
	}
</script>

3. 懒加载插件jquery.lazyload.js

懒加载插件下载地址:lazyload

懒加载插件实现方法

使用jquery懒加载插件,需在html中使用属性data-original来预加载src属性。

<script>
	$("img").lazyload({
		effect:"fadeIn",//淡入效果
	})
</script>

懒加载的实现的原理很简单,使用插件的话更加的easy。在资源较多、需要加载的数据较大的时候可以考虑使用懒加载来实现较好的页面浏览效果。