优化-图片懒加载
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了优化-图片懒加载相关的知识,希望对你有一定的参考价值。
我们开发商城项目的时候,商品图片会有很多
如果在进入页面一下子就加载很多图片资源的话,会导致进入页面会很慢
我们今天说到的图片懒加载,是一个优化层面的 主要会有哪些优点呢?
比如:加载页面会快一些,包体积会小一些
网络层面的话就是减少了http请求
我们都知道,在浏览器打开的瞬间,同一时间最多并行6-8个请求
如果说图片请求比较多的话,就有可能和其它请求发生竞争关系,造成网络堵塞,会影响其它比较重要的网络请求
实现图片懒加载,主要使用vue3的自定义指令,进行按需加载
import defaltImg from @/assets/images/200.png
// 引入监听是否进入视口
import useIntersectionObserver from @vueuse/core
export default
install(app)
// 自定义指令
app.directive(imglazy,
mounted(el,binding)
// el: dom对象
// binding:binding.value可以拿到图片的url地址
const stop = useIntersectionObserver(
//监听目标元素
el,
([ isIntersecting ], observerElement) =>
if(isIntersecting)
// 当图片加载失败的时候就用默认的图片代替
el.onerror=()=>
el.src = defaltImg
el.src = binding.value
stop()
,
// 刚进入视口区域就立刻执行回调 0 - 1
threshold: 0
)
)
最后我们需要在全局入口文件中将其注册为插件即可
import defineDirective from @/directives
createApp(App).use(store).use(router).use(componentPlugin).use(directivePlugin).mount(#app)
以上是关于优化-图片懒加载的主要内容,如果未能解决你的问题,请参考以下文章