vue 图片懒加载和懒加载原理

你的名字 2021-07-24 20:08 908阅读 0赞

在真实图片得到之前,展示懒加载设置的图片
    
    1、安装
    	cnpm i vue-lazyload -S
    	
    2、main.js
    	import VueLazyload from 'vue-lazyload'
    
    	Vue.use(VueLazyload, {
    	  preLoad: 1.3,
    	  error: 'dist/error.png',
    	  loading: '图片路径/gif路径/引入图片对象',
    	  attempt: 1
    	})
    	
    3、使用
    	只需要将:src变成v-lazy即可
    	<img v-lazy='url'/ >	
    
    懒加载原理实现:
    	<img src="临时加载地址" alt="1" data-src="图片真实地址">
    	当在浏览器可视区域外,则加载本地的小图片,进入可视区域,则加载属性上保存的真实图片地址
    
    	方式一:通过浏览器可视区域高度+已经滑动的距离>图片距离文档顶部的距离,则进行懒加载
    		
    	方式二:getBoundingClientRect
    		Top属性代表当前DOM节点距离浏览器窗口顶部的高度,只需判断top值是否小于当前浏览器窗口的高度(window.innerHeight)
    		若小于说明已经进入用户视野，然后替换为真正的图片即可

代码示例:

懒加载原理参考:

// 获取图片列表，即img标签列表
    var imgs = document.querySelectorAll('img');
    
    // 获取到浏览器顶部的距离
    function getTop(e){ 
    	return e.offsetTop;
    }
    
    // 懒加载实现
    function lazyload(imgs){ 
    	// 可视区域高度
    	var h = window.innerHeight;
    	//滚动区域高度
    	var s = document.documentElement.scrollTop || document.body.scrollTop;
    	for(var i=0;i<imgs.length;i++){ 
    		//图片距离顶部的距离大于可视区域和滚动区域之和时懒加载
    		if ((h+s)>getTop(imgs[i])) { 
    			// 真实情况是页面开始有2秒空白，所以使用setTimeout定时2s
    			(function(i){ 
    				setTimeout(function(){ 
    					// 不加立即执行函数i会等于9
    					// 隐形加载图片或其他资源，
    					//创建一个临时图片，这个图片在内存中不会到页面上去。实现隐形加载
    					var temp = new Image();
    					temp.src = imgs[i].getAttribute('data-src');//只会请求一次
    					// onload判断图片加载完毕，真是图片加载完毕，再赋值给dom节点
    					temp.onload = function(){ 
    						// 获取自定义属性data-src，用真图片替换假图片
    						imgs[i].src = imgs[i].getAttribute('data-src')
    					}
    				},2000)
    			})(i)
    		}
    	}
    }
    lazyload(imgs);
    
    // 滚屏函数
    window.onscroll =function(){ 
    	lazyload(imgs);
    }