关于img标签加载图片失败优化以及懒加载。

这篇博客算是完全的笔记了，记录一下平常中不怎么注意的img标签的一些事。

昨天看到这篇Handling broken images with the service worker文章，这文章中有另外提到用伪元素处理加载图片失败的样式问题。当图片加载失败的时候，并不是手足无绰的对着丑陋的发呆，尽管有alt属性可以做个解释，但我更觉得是丑上加丑。因为img是个可替换元素，先来回顾一下什么是可替换元素：替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。

那这时候当img加载图片失败的时候，它就可以被它的伪元素样式所覆盖（img：兄弟我这出了点事情，你帮我顶一下）。引用上边文章中的例子：

img { /* Same as first example */ }img:after { content: "\f1c5" " " attr(alt);font-size: 16px;font-family: FontAwesome;color: rgb(100, 100, 100);display: block;position: absolute;z-index: 2;top: 0;left: 0;width: 100%;height: 100%;background-color: #fff;
}

显示出的效果：

这样一来确实是比之前丑陋的失败图片好看一点，在这基础上大家可以自由发挥，可以让图片变的更加优美点。用伪元素替换img加载失败的方案基本上是可行的，也不会特别复杂和难以理解。好的东西都是会有那么一点的瑕疵：兼容性并不是完美的，在Safari 浏览器以及ios系统上不太理想。

于是上边提到的那篇博客利用了service worker fetch事件（关于service worker可以看这里），具体代码：

self.addEventListener('fetch', (e) => {e.respondWith(fetch(e.request).then((response) => {if (response.ok) return response;// User is online, but response was not okif (isImage(e.request)) {// Fetch the broken image placeholder insteadreturn fetch("/broken.png");}}).catch((err) => {// User is probably offlineif (isImage(e.request)) {// do something}}) // end fetch)
});

这个方法只适用于在线，当用户离线时候，就无法保存下broken图片，于是就有了下面的方法：

self.addEventListener('install', (e) => {self.skipWaiting();e.waitUntil(caches.open("precache").then((cache) => {// Add /broken.png to "precache"cache.add("/broken.png");}));
});self.addEventListener('fetch', (e) => {e.respondWith(fetch(e.request).then((response) => {if (response.ok) return response;// User is online, but response was not okif (isImage(e.request)) {// Get broken image placeholder from cachereturn caches.match("/broken.png");}}).catch((err) => {// User is probably offlineif (isImage(e.request)) {// Get broken image placeholder from cachereturn caches.match("/broken.png");}}))
});

介绍完了对于加载图片失败的优化，接下来就聊聊关于图片懒加载。大家或多或少都对图片懒加载有点了解，无非就是当浏览器可视区域滚动到图片所在的区域时，一般选择把img标签中的src中的URL替换成data-src中的URL。也就是说，本来这图片的src可能根本不存在，于是就会产生一个上面提到的原始的丑陋图片(当然你可以用上面提到的方案优化你的图片)。当img标签的URL被替换成正确的路径时，图片就会开始渲染，这是图片所呈现的高度以及宽度会和之前加载失败时候的高度宽度不一致（如果你没强制去设置的话），那么就会带来浏览器最不想发生的重排重绘。

Preventing Content Reflow From Lazy-Loaded Images这篇文章讲述了四种防止图片懒加载导致的重拍重绘的解决办法。

利用伪元素去支撑宽高：这方法和之前优化加载失败图片的方式如出一辙，两个的原理也是相同的，都是因为img无法加载到正确的图片时候伪元素就有了发挥的空间。

利用BASE64位编码数据放在src上支撑宽高：先举个例子：

<img src="https://img-blog.csdnimg.cn/2022010616222118501.png" data-src="https://images.unsplash.com/photo-1524654458049-e36be0721fa2?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=1a6782be5cdb94b780ed9d4a79de7041" alt="">

相信很多人对这写法不会陌生吧，webpack打包image的时候，在给png这类图片用url-loader解析的时候需要有limit属性来限制打包进webpack中图片的大小。使用png-pixel网站生成具有相同宽高的透明背景。这种方案兼容性会比使用伪元素的兼容性好一点，也不需要在css中写一堆烦人的样式。但是每次都要根据图片去生成一个BASE64的透明背景也是挺烦人的。

使用BASE64转换svg图片：这个方案只能说是上一个方案的优化，因为还是要转换BASE64。两者的不同点在于：svg图片占用空间会小于上述的png图片。

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzIDIiPjwvc3ZnPg==" data-src="https://images.unsplash.com/photo-1524654458049-e36be0721fa2?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=1a6782be5cdb94b780ed9d4a79de7041" alt="">

而且随着比例的增加，所省的空间也就越多。 should not use base64 encoding with SVG这篇文章大概意思是说，使用BASE64位编码后，字符变大导致存储空间变多。最大的没必要的就是用BASE64来编码svg，因为svg语法中并没有一些奇形怪状的字符在里面。

使用URL编码：既然svg空间小于png，而且svg没有必要使用BASE64编码。那就直接放上去好了吧，但是URL还是会自动去编码，有可能会去BASE64编码还长。

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M224 387.814V512L32 320l192-192v126.912C447.375 260.152 437.794 103.016 380.93 0 521.287 151.707 491.48 394.785 224 387.814z"/></svg>

可能有人就纳闷了，那我难不成在选择URL编码或者BASE64编码的时候还得去比较一下？那这真的是很白痴的行为，大神们总会在你之前就想到了这个办法，Optimizing SVGs in data URIs，这篇文章深入的讲解了如何在URL编码的时候进行优化，一个核心就是将属性节点中的双引号全部改成单引号，因为只有单引号是允许出现在URL当中不会被编码。

结束语：用行动去打破平衡，用努力去充实自我

关于img标签加载图片失败优化以及懒加载。相关推荐

html5 数据懒加载图片,Jsoup+HtmlUnit获取懒加载数据
需要的包: org.projectlombok lombok provided 1.16.20 org.jsoup jsoup 1.8.3 net.sourceforge.htmlunit htmlu ...
chrome浏览器加载图片失败问题
现象:项目上线后,加载图片是正常的.过了一段时间,部分用户反馈加载图片失败,部分用户加载图片正常. 分析:系统是https的,图片链接为http的.Chrome在80版本后(所以部分用户能看到,部分看 ...
htmlimg图片加载失败_动态加载图片失败的默认图显示
经常碰到这类场景,动态加载图片时,因为一些原因(图片链接不存在啊,图片误删啊,图片路径不对或图片路径为空等等)导致真实图片显示不出来.那么为了提高用户体验,都会显示一个默认图. 动态加载图片失败时,显 ...
qtCreator加载图片失败
qtCreator加载图片失败前言在qt中加载图片总是失败解决 1.首先工程pro文件中加入qrc文件配置项,比方说image.qrc 2.编辑image.qrc文件 <RCC>&l ...
前端性能优化总结/懒加载、函数节流、优化dom操作、雪碧图、合并文件
1.减少 HTTP 请求数量在浏览器与服务器进行通信时,主要是通过 HTTP 进行通信.浏览器与服务器需要经过三次握手,每次握手需要花费大量时间.而且不同浏览器对资源文件并发请求数量有限(不同浏览器 ...
js实现点击图片放大效果,以及懒加载图片
js实现点击图片放大效果,以及懒加载图片近期有个后端管理页面小优化,原来的图片是点击才会去后端请求图片展示到前端,用dialog的方式展示,但是不太直观存在两个问题 1.点击查看后,电子照片会变形 ...
html如何实现页面懒加载,浏览器HTML自带懒加载技术
对于目前的图浏.富混工就划这些本公的响示近览记的迹更片懒加载,我们一般采用的是通过第三方库或懒加载库来实现,但是该方式的显著问题就是,必须按插者几天网后供小来剑思含程个些结十在必页到别则气底.时效器按 ...
html 语音懒加载,浏览器HTML自带懒加载技术
对于目前的图片懒加载,我们一般采用的是通过第三方库或懒加载库来实现,但是该方式的显著问题就是,必须按顺序执行: 1.加载初始的 HTML 响应内容 2.加载懒加载库 3.加载图片假如浏览器能直接支持 ...
mysql 懒加载数据_jpa如何懒加载大字段，懒加载之后又如何获取懒加载字段
前言:对于大字段,我们在查询列表的时候不需要查询,但是修改的时候有需要展示大字段内容,怎么办问1.jpa如何懒加载大字段?即查询列表的时候不查询出来问2.懒加载之后又如何获取懒加载字段.比如,在后 ...

关于img标签加载图片失败优化以及懒加载。

关于img标签加载图片失败优化以及懒加载。相关推荐

最新文章

热门文章