vue预加载懒加载

Posted 2022-11-03 辣可乐少加冰

项目场景：

提示：记录：
预加载：会在使用之前，提前加载js文件（等其他资源加载完毕，浏览器空闲了，在偷偷加载资源，适用于pc端）兼容性问题严重，caniuse查看是否使用该技术
懒加载：当文件需要使用时才加载

懒加载： 又叫做延迟加载，通过加载网络资源或符合某些条件时才加载资源。常见的就是图片延迟加载。
懒加载的意义：懒加载的目的主要是作为服务器前端的优化，减少请求数或延迟请求数。
懒加载的实现方式：
1、纯粹的延迟加载:使用setTimeOut或者setInterval进行加载延迟。
2、条件加载:符合某些条件，或者触发某些事件才开始异步加载。
3、可视化区域加载：即只加载用户看得到的区域通过监控滚动来实现，一般会在距离用户看到图片前一定距离才开始加载，这样可以保证用户下拉时正好看到图片。

区别：一个是提前加载，一个是延迟甚至不加载，懒加载可以缓解服务器对的压力。预加载会增大服务器的压力，比如广告弹窗等。

---

问题描述

：

showdate(date)
	let ids = date.map(res => 
		return res.projid
  
	post('',
	ids:ids.join(,)
  ).then(asycn res => 
  		this.bseList = []
  		for (let i<0;i<res.img.length;i++)
     	let images = await getofd(res.img[i]);
     	this.baseList = this.baseListAll.concat(images)
     
     this.base64Look = this.baseList(0,3)
  )
)

---

原因分析：

提示：预加载：

技术：vue

<div scoll='scollHeight' >
	<div v-for="(item,index) in base64LikeLook" >
        //<img :src=' 'date:image/jpg;base64'+ 'item''>
        <img :src="item"/>
    </div>
</div>

date()
	return 
	baseList:[],
	baseListAll:[]
 


methods:
  scollHeight(e)
		  	if((this.base64Look.length*1605 - e.target.scrollTop )) <= 1605 && this.base64ListAll)					     
	this.baseListLook = [...this.base64Look,...this.baseListAll.splisce(0,3)]	
 
  

---