js懒加载的实现原理

原创 Dean 工作笔记 二维码阅读
2016-05-25 21:04

懒加载作为一种提升性能,优化的手段已经在web开发中广泛应用,那么到底什么是懒加载它又是基于什么原理实现的呢?

懒加载说的直白点就是先做一部分事情,剩下的事情等到需要做的时候再做。

我们这里说说在前端开发中用的比较多的图片懒加载技术,所谓图片懒加载就是页面刷新的时候只是请求视图之前的图片资源,对于之后的图片资源等到他在视图范围内之后再进行加载,这样子较少了很多http请求,很好的web应用程序的性能。

那么如何做图片懒加载呢?

实现原理:

1、对于img标签,只要将图片地址赋给src属性,浏览器解析的时候就会自动去请求图片地址所指向的资源,浏览器的这个机制我们是没办法改变的,那么我们只能在src属性上做文章,在刚开始的时候我们把图片地址赋给img标签一个自定义属性例如data-src,src属性留空。

2、设置一个定时器定时检测出现在视图内的图片,并将其data-src属性的值赋值给src属性。(其实这个地方也可以通过事件来检测)

原生js的实现:

var imgs = document.getElementsByTagName("img");
function lazyload(){
	var scrollTop = window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop;
	var viewportSize = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
	for(var i=0,len=imgs.length;i<len;i++){ var x = scrollTop + viewportSize - imgs[i].offsetTop; if(x>0){
			imgs[i].src = imgs[i].getAttribute("loadpic");
		}
	}
}
setInterval(lazyload,1000);

jQuery的实现:

$(function(){
	var viewportSize = $(window).height();
	var lazyload = function(){
		var scrollTop = $(window).scrollTop();
		$("img").each(function(){
			var _this = $(this);
			var x = viewportSize + scrollTop + _this.position().top;
			if(x>0){
				_this.attr("src",_this.attr("loadpic"));
			}
		})
	}
	setInterval(lazyload,1000);
})

当然这个只是一个实现原理,如果真的用在生产环境,还是使用lazyload吧,这样子出现bug的几率比较小。

本文地址:https://www.deanhan.cn/js-lazyload.html
版权声明:本文为原创文章,版权归 Dean 所有,欢迎分享本文,转载请保留出处!
  • 支付宝二维码 支付宝
  • 微信二维码 微信