图片懒加载

一个简单的图片懒加载方法

1、创建一个 js 文件

class lazyLoad{
	install(Vue,options){
		const _this = this;
		// 默认 占位图
		let defaultImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAMAAABOo35HAAAAXVBMVEXy8vKWlpbb29vExMSsrKylpaXj4+O1tbXPz8/IyMjS0tLMzMze3t69vb3m5ubW1ta6urq3t7eenp7Gxsbu7u6bm5vZ2dnCwsKioqKzs7Ovr6/r6+u/v7/g4OCpqanKMO/xAAADyElEQVR42uzBQQqAIBAAwDXoEpshSPX/l/YKhWRmAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB+rdfcBsnaYyHX+Zah9ueONWQrE7SMBRxlko+9e1tSFIaiMLyWqEFQVBQVT+//mDM1owPB3tAtyFSS/V96l68IFTWQBZwv5WhFcLyUI+b4jetWcMTyOVxuy1HbwuEO7Eon4r82/Fd+n36q3I9LqxrGGh9swWcFnG3CZxk+2oXPJnC1hI92+HA7PkrgagthEg5f4v4yPhptckzcX8UrlmL9TbHGrxtrmcZzxfoO1q0sSDIvJ4rVhRXxX1fFasfKWeuqWG1YG1otFUvGOtBuulcsEWvFRoliiVglG+0US8SasdFGsUQsNpsqll5ZQ2AZvWd9H+vKRmvFErGyglZbXZTKWEhpdVGsFiycWSvW74atWFjz2emAH2dMUFjIyhPJvIze2zthgsICsL9l728HMIFhvdmKfzKK9W0r0iiW2OuC1ihWe0fWMorVVkQro1hyOzYygWPN5ZEu+JIJGiubMZKtXjMBY2V3cawpv8wEi5XdxcHGrBXVtQLFukyt0cpWsLSCxPptJQ03afwKbWsFiLU/k4LW2rJ6WUaY4LAsKzKSrBbAq1ZoWCUpaB2KptWrVlhYJSloTSwrYeFlQsIypKC1zG0rSSscLEMKWpZVCshaoWBtWTWztG6nppWsFQbWhlXHuaXVbgWkda0QsCwrwNLq/H8x9eqh8k6sFatWgKQV4+vSkLAaVpJWDKk0HKyrvU9L0kogl4aCdbR300haCdqKw8BqWElaCdqLQ8Bq/NAiahl0afmPtWNVCfTS8h1rwarzHv20Er+xBCtBa9up5TNWWre6AP21/MWqW00vwBBavmLFopWstUFHUz+x6lb3DBhG6+4lVsKqWQYMpDXzEcuymgNDaZ08xFqz6nQDBtPK/cOyrJbAD7WCwqpb5RPgp1oriBW+YR0Kyaq/lm/rrEnNqjgAb2kFgmVZrYFBtfZ+YS1z2aq/1sUrrLoVE2BgrcwnrNvJtuqjdfUdq24VA4NrzT3CmtlWfbWOaLb0CKtWCvTXunr4oNNCsup/bfn3ntJYODpheK1dNcld7SC8H2RwrYsH7zjfy1b9taIvp7vDR/CUrBf1z9J6tKp9eIa7xRwp929ZAM4cIT8uLGDNUVvD6TYcsRSOV1JOJ+F/u8kf4UF6Ct0jPd/wjfTkTE3TNE3TfrUHhwQAAAAAgv6/trsBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGACLPAveExPUwEAAAAASUVORK5CYII=';
		options.defaultImg = options.defaultImg?options.defaultImg:defaultImg;
		//创建指令
		Vue.directive('lazy',{
			bind(el,binding){
				_this.init(el,binding.value,options.defaultImg);
				_this.initObserve(options);
			},
			inserted (el, binding) {
				_this.observe(el); 
			}
		})
	}
	// 设置占位图
	init(el,val,def){
		el.setAttribute("data-src",val);
		el.setAttribute("src",def);
	}
	/** 创建IntersectionObserver实例
	 * 	替换 占位图
	 * */
	initObserve(options){
		let io = new IntersectionObserver(function(entrys){
			entrys.forEach(entry=>{
				if(entry.isIntersecting){
					const el = entry.target;
					el.src = el.dataset.src;
					el.removeAttribute('data-src');
					setTimeout(function () {
						io.unobserve(el); // 停止监听 接受一个element元素
					}, 0);
				}
			})
		},options|| {})
		this.io = io;
	}
	// 对该元素开启监听
	observe (el) {
		//对不支持 IntersectionObserver 的，采用传统监听方式
		if(IntersectionObserver){
			this.io.observe(el);// 开启监听，接受一个DOM节点对象
		}else{
			this.listenerScroll(el);
		}
	}
	listenerScroll (el){
		this.load(el);
		window.addEventListener('scroll', (e) => {
			if (el.dataset.src) {
				this.load(el);
			}
		});
	}
	load (el) {
	    // 获取窗口高度
	    let docHeight = document.documentElement.clientHeight,getBoundingClientRect = el.getBoundingClientRect();
	    let bottom = getBoundingClientRect.bottom,top = getBoundingClientRect.top;
	    // 当元素进入窗口时，才加载真实图片
	    if (top < docHeight && bottom > 0) {
	      el.src = el.dataset.src;
	      el.removeAttribute('data-src');
	    }
	}
}
export default new lazyLoad()

2、在main.js中引入

//导入上面的写的js
import LazyLoad from '路径';
// 全局配置
Vue.use(LazyLoad,{
	defaultImg: '' //可传可不传
});

3、页面使用

//使用 v-lazy 代替原来的 src, imgSrc就是图片路径
<img v-lazy="imgSrc" mode="aspectFill" >

4、至此，一个简单的图片懒加载方法就结束了。