如何构建您自己的渐进式图像加载器

suchonababu941

您可能在Facebook和Medium上遇到过渐进式图像。当元素滚动到视图中时，模糊的低分辨率图像将替换为全分辨率版本： 渐进图像示例 预览图像很小——可能是 20 像素宽度的高度压缩的 JPEG。该文件可以小于 300 字节，并且会立即显示，给人以快速加载的印象。当需要时，真实图像会被延迟加载。 渐进式图像很棒，但当前的解决方案相当复杂。幸运的是，我们可以用一点 HTML5、CSS3 和 JavaScript 来构建一个。该代码将： 快速且轻量级 – 仅 463 字节的 CSS 和 1,007 字节的 JavaScript（缩小） 支持响应式图像以加载更大或高分辨率（视网膜）屏幕的替代版本 没有依赖关系——它可以与任何框架一起使用 适用于所有现代浏览器 (IE10+) 逐步增强以在较旧的浏览器中工作或在 JavaScript 或图像加载失败时工作 易于使用。

我们的演示和 GitHub 代码 我们的技术如下所示： 从 GitHub 下载代码 超文本标记语言 我们将从一些基本的 HTML 开始来实现渐进式图像在哪里： full.jpg是链接中包含的大型全分辨率图像href，以及 tiny.jpg是我们的小预览图像。  我们已经有了一个最小的工作系统。如果没有任何 JavaScript（或者在较旧的浏览器中可能会失败），用户可以通过 伯利兹 WhatsApp 号码列表 单击预览来查看完整图像。 两个图像必须具有相同的长宽比。例如，如果为 ，则生成的纵横比为 4:1。tiny.jpg因此可以是 20 x 5，但您不应该使用 30px 宽度，这将需要几乎不可能的 7.5px 高度。 注意链接和预览图像上使用的类；这些将在我们的 JavaScript 代码中用作钩子。 内嵌或非内嵌图像 预览图像也可以作为数据 URI 内联，例如  内嵌图像立即显示，需要更少的 HTTP 请求并避免额外的页面回流。




然而： 添加或更改内联图像需要花费更多精力（尽管Gulp等构建过程可以提供帮助） base-64 编码效率较低，通常比二进制数据大 30% （尽管这可以通过额外的 HTTP 请求标头来抵消） 内联图像无法缓存。它们将被缓存在 HTML 页面中，但如果不重新发送相同的数据，则无法在其他页面上使用。 减少了对内联图像的需求。 务实一点：如果图像在单个页面上使用或者生成的代码很小（即不比 URL 长多少），那么内联是一个不错的选择 我们首先定义链接容器样式 这设置了基本的容器布局属性。如果需要，链接可以应用其他类和样式来设置尺寸或位置。 您可以考虑设置精确的尺寸或使用高度比。我选择保持简单： 预览和大图像必须具有相同的宽高比（见上文） 预览图像几乎会立即定义容器的高度，因为它是内联的或加载速度很快。