如何使用SVG作为占位符和其他图像加载技术

从图像生成SVG可用于占位符。继续阅读! 我热衷于图像性能优化,并使图像在网络上快速上传。最有趣的探索领域之一是占位符:当图像尚未加载时显示的内容。 在过去的几天里,我遇到了一些使用SVG的加载技术,我想在这篇文章中描述它们。 在这篇文章中,我们将通过以下主题: 不同类型的占位符的概述 基于SVG的占位符(边缘,形状和轮廓) 使过程自动化。 不同类型的占位符的概述 以前我写过关于占位符和图片的懒惰,也谈过。在进行图片延迟加载时,最好考虑以占位符的形式呈现什么内容,因为这会对用户的感知性能产生很大的影响。过去我介绍了几个选择: 在加载之前填充图像区域的几种策略。 保持图像空间为空:在响应式设计的世界里,这可以防止内容跳动。从用户的体验角度来看,这些布局的变化是不好的,但是对于性能来说也是如此。每次获取图像的尺寸时,浏览器都会被迫进行布局重新计算,从而留下空间。 占位符:想象一下,我们正在显示用户的个人资料图像。我们可能想要在后台显示剪影。这是主图像加载时显示,但也是当这个请求失败,或者当用户没有设置任何配置文件图片。这些图像通常是基于矢量的,而且由于它们的尺寸小,所以是一个很好的候选内联。 纯色:从图像中获取一种颜色,并将其用作占位符的背景颜色。这可以是主色调,最有活力…这个想法是,它是基于你正在加载的图像,并应该有助于使没有图像之间的过渡更加平滑的图像。 模糊的图像:也称为模糊技术。您渲染图像的一个微小的版本,然后转换到完整的版本。最初的图像在像素和kB中都很小。为了去除伪影,图像被放大并模糊。我之前已经写过关于如何使用渐进式图像加载,使用WebP创建微小的预览图像以及渐进式图像加载的更多示例  。 结果还有很多其他的变化,许多聪明的人正在开发其他技术来创建占位符。 其中之一是有渐变,而不是纯色。渐变可以创建最终图像的更准确的预览,只需很少的开销(有效负载的增加)。 使用渐变作为背景。Gradify截图,不在线了。在GitHub上的代码。 另一种技术是使用基于图像的SVG,这是最近的实验和黑客获得一些牵引力。 基于SVG的占位符 我们知道SVG是矢量图像的理想选择。在大多数情况下,我们要加载一个位图,所以问题是如何矢量化图像。一些选项正在使用边缘,形状和区域。 边缘 在之前的文章中,我解释了如何找出图像的边缘并创建动画。我最初的目标是试图绘制地区,矢量图像,但我不知道该怎么做。我意识到,使用边缘也可以是创新的,我决定创造一个“绘画”效果的动画。

友情提示:点赞熊源码网http://www.dianzanxiong.com点赞熊源码网 » 如何使用SVG作为占位符和其他图像加载技术
分享到:
赞(0)
广告位820*80