图片在前端项目占比很大，随着图片压缩技术和浏览器渲染技术的发展，既淘汰了很多过时的图片性能优化技巧，又应运而生了不少简单、可靠的图片优化手段
- 提前首屏图片的加载时机
- 降低加载图片的体积
- 减少加载图片的数量
1. decoding=“async” 非首屏图片异步解码
<img src="image.jpg" decoding="async">
2. content-visibility 另外一种懒加载
<style>
.image-gallery {
content-visibility: auto;
contain-intrinsic-size: 1000px 500px; /* 设置一个合适的占位大小 */
}
</style>
<div class="image-gallery">
<img src="image1.jpg" alt="描述1">
<img src="image2.jpg" alt="描述2">
<!-- 更多图片 -->
</div>
content-visibility 的浏览器兼容性并不是非常乐观，需要开发者在使用时候加以判断。
3. load=“lazy” 不依赖 JavaScript 的懒加载
<img src="image-to-lazy-load.jpg" loading="lazy">
这个属性有三个可能的值：
1.lazy：启用懒加载。浏览器会在图片即将进入视口时才开始加载。
2.eager：禁用懒加载。图片会随着页面加载立即开始加载，无论图片位置如何。
3.auto：浏览器自行决定何时加载图片，这是默认值
4. fetch-priority
<img src="important-image.png" fetch-priority="high" alt="Important Image">
<img src="less-important-image.png" fetch-priority="low" alt="Less Important Image">
fetch-priority 属性可以设置不同的优先级值，high、low 和 auto（默认）。可以应用于各种资源，如、、
5. 优化网络建连
<head>
<link rel="dns-prefetch" href="https://examplecdn.com">
<link rel="preconnect" href="https://examplecdn.com">
</head>
6. element-ui
<el-image v-for="url in urls" :key="url" :src="url" lazy></el-image>
可通过
lazy开启懒加载功能，当图片滚动到可视范围内才会加载。可通过scroll-container来设置滚动容器，若未定义，则为最近一个overflow值为auto或scroll的父元素
7. v2-lazyload-hyw
npm i v2-lazyload-hyw
// main.js
import createLazyLoad from "v3-lazyload-hyw";
const lazyOption = {
loading:'',
error:'',
payload:1.3
}
Vue.directive('lazyload',createLazyLoad(lazyOption))
//index.vue
// 图片懒加载：
<img v-lazyload='图片路径' />
// 视频懒加载：
<video v-lazyload='视频路径' controls>
8. vue3-lazy
跳转见：自定义图片懒加载
各位道友，有好的方法，欢迎留言，持续更新中…
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
