页面加载图片优化方式

图片无法加载问题或者破图解决方式

传统的图片加载异常会使用一个加载失败的占位符代替，这个占位图通常会是一张裂开的图片。

1.使用占位图

例如下面这张图：

触发使用占位图可以通过onerror事件，代码示意如下：

html代码
<img src="xxx.png" alt="XXXX图片" onerror="this.src='break.svg';">

配合CSS：

img[src$="break.svg"] {
    object-fit: contain;
}

2.同时显示alt信息

html代码
<img src="zxx.png" alt="XXXXXXX" onerror="this.classList.add('error');">

img.error {
  display: inline-block;
  transform: scale(1);
  content: '';
  color: transparent;
}
img.error::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: #f5f5f5 url(break.svg) no-repeat center / 50% 50%;
}
img.error::after {
  content: attr(alt);
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  line-height: 2;
  background-color: rgba(0,0,0,.5);
  color: white;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

2.图片大小建议同时写上高和宽

关键字：object-fit

ul li img {
    width: 150px;
    height: 100px;
    object-fit: cover;
}

3.考虑屏幕 dpr -- 响应式图片

考虑利用多倍图去适配不同 dpr 的屏幕

<img> 标签是有提供相应的属性 srcset 让我们进行操作的

<img 
        src = "photo.png" 
        sizes = “(min-width: 600px) 600px, 300px" 
        srcset = “photo@1x.png 300w,
                       photo@2x.png 600w,
                       photo@3x.png 1200w,
>