路由懒加载
当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就会更加高效
在router.js中
传统的路由加载:
import Home from "@/views/Home"
{
path:"/home",
component:Home,
}
路由懒加载
const foo = ()=>{
console.log(1111)
return import ("@/views/Home")
}
{
path:"/home",
component:foo,
}
简化写法:
{
path:"/home",
component:()=>import ("@/views/Home")
}
图片懒加载
图片是非常占用页面渲染时间的,尤其是一些图片比较多的页面,过多的图片可能会造成页面的卡顿,降低流畅度影响用户体验,我们在实际开发中,对于处于视口外的图片,在用户没有滚动到位置的时候没必要渲染,此时我们就需要用到懒加载,让图片延后渲染。
懒加载就是优先加载可视区域的内容,其他部分等进入了可视区域在加载
一个插件vue-lazyload - npm (npmjs.com)
npm i vue-lazyload -S
vue3:
npm i vue3-lazy-D
在main.js中
import VueLazyload from 'vue-lazyload' //引入插件
import atm from '@/assets/1.gif'
Vue.use(VueLazyload,{ //注册插件
//懒加载默认的图片
loading:atm
})
切换页面的懒加载
就可以使用它了,在懒加载页面使用v-lazy代替 :src
<img v-lazy="img.src" />
同一页面上下滑动的懒加载
原理实现
当在浏览器可视区域外,则加载本地的小图片,进入可视区域,则加载属性上保存的真实图片地址
方式一:通过浏览器可视区域高度+已经滑动的距离>图片距离文档顶部的距离,则进行懒加载
方式二:getBoundingClientRect():获取元素的大小及位置
Top属性代表当前DOM节点距离浏览器窗口顶部的高度,只需判断top值是否小于当前浏览器窗口的高度(window.innerHeight) 若小于说明已经进入用户视野,然后替换为真正的图片即可
offsetTop-scroolTop<clientHeight,表示进入可视区域
懒加载其实就两个重点,一个是元素到各个边距的距离,二个就是判断元素是否在可视区域内。
具体代码实现
首先获取图片列表,然后执行懒加载函数进行初始化,接着监听滚动事件,一旦发生滚动就触发懒加载函数,检查是否有图片需要加载
<img data-src="./zjh.jpg" alt="">
<img data-src="./zjh2.jpg" alt="">
// 获取图片列表,即img标签列表
const images = document.getElementsByTagName("img")
// 懒加载实现
const lazyImg1 = ()=>{
window.addEventListener("scroll",()=>{
[...images].forEach(image =>{
//获取图片的相对顶部的高度
const top = image.getBoundingClientRect().top;
console.log("相对高度",top)
if(top<window.innerHeight){
//如果露出来,就把图片加载出来
const data_src = image.getAttribute("data-src")
image.setAttribute("src",data_src)
}
})
})
}
//执行懒加载函数进行初始化
lazyload(imgs);
debounce(lazyImg1,3000)