关于图片加载的问题-如加载失败显示占位图，预加载，懒加载

最新推荐文章于 2024-08-06 17:12:56 发布

吃瓜群众欢乐多

最新推荐文章于 2024-08-06 17:12:56 发布

阅读量3.3k

点赞数 2

本文链接：https://blog.csdn.net/sinat_36146776/article/details/90080948

版权

一、图片加载失败时，如图所示

如图所示

<img v-if="src"  :src="src" :onerror="errorImg">

	let nullImage = require('../../src/assets/img/detail-not-image.png');
	data(){
      return {
        errorImg:'this.src="'+nullImage+'"',
      }
    },

二、图片过多，加载优化

解决方式总结

1、加载使用JPEG格式（Progressive JPEG），not Baseline JPEG。
会先显示图片的模糊轮廓，jpeg是没加载完都可以模糊显示，其他格式是一定是100%才显示
2、图片懒加载，让可视区域内的图片先显示，其他的不显示
3、预加载
img = new Image();
img.src = src
4、懒加载
5、data-src ，图片没加载前先显示一张占位图片
6、在上传图片的时候就生成缩略图

三、其他

图片加载问题
https://mp.weixin.qq.com/s/E-Hj59OWwEO6V_fqY9NxgQ
一次 Web 端大量图片同时加载卡顿问题的优化之旅
img 的data-src 属性及懒加载
https://www.cnblogs.com/moxiaowohuwei/p/7908877.html
将图片压缩后显示
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/automating-image-optimization/?hl=zh-cn#how-far-have-we-come-from-the-jpeg