渐入渐出的图像融合算法_如何构建自己的渐进式图像加载器

最新推荐文章于 2022-10-06 12:44:47 发布

culh2177

最新推荐文章于 2022-10-06 12:44:47 发布

阅读量1.2k

点赞数

文章标签： js java css javascript python ViewUI

原文链接：https://www.sitepoint.com/how-to-build-your-own-progressive-image-loader/

版权

本文介绍了渐进式图像加载的概念，通过使用HTML5、CSS3和JavaScript，实现了一个轻量级且快速的加载系统，支持响应式图像和在不同浏览器中工作。该系统在全分辨率图像加载前，先展示模糊的低分辨率预览，提高页面加载速度。文章详细阐述了HTML、CSS和JavaScript的实现细节，包括如何处理响应式图像、内联图像以及如何在不同场景下优化性能。

摘要由CSDN通过智能技术生成

渐入渐出的图像融合算法

A magician revealing an image via progressive image loader

You may have encountered progressive images on Facebook and Medium. A blurred low-resolution image is replaced with a full-resolution version when the element is scrolled into view:

您可能在Facebook和Medium上遇到了渐进式图像。当元素滚动到视图中时，模糊的低分辨率图像将替换为全分辨率版本：

The preview image is tiny – perhaps a 20px width highly-compressed JPEG. The file can be less than 300 bytes and appears instantly to give the impression of fast loading. The real image is lazy-loaded when required.

预览图像很小-可能是20px宽度的高度压缩JPEG。该文件可以少于300个字节，并会立即显示，以给您快速加载的印象。实际图像在需要时被延迟加载。

Progressive images are great but the current solutions are quite complex. Fortunately, we can build one with a little HTML5, CSS3 and JavaScript. The code will:

渐进式图像很棒，但是当前的解决方案非常复杂。幸运的是，我们可以使用一些HTML5，CSS3和JavaScript来构建一个。该代码将：

be fast and lightweight – just 463 bytes of CSS and 1,007 bytes of JavaScript (minified)
快速而轻巧–仅463字节CSS和1,007字节JavaScript(最小化)
support responsive images to load alternative versions for larger or high-resolution (Retina) screens
支持响应图像以加载更大或更高分辨率(Retina)屏幕的替代版本
have no dependencies – it will work with any framework
没有依赖关系–可以与任何框架一起使用
work in all modern browsers (IE10+)
在所有现代浏览器(IE10 +)中均可使用
be progressively enhanced to work in older browsers or when JavaScript or image loading fails
逐步增强以在较旧的浏览器中运行，或者在JavaScript或图像加载失败时使用
be easy to use.
易于使用。

我们的演示和GitHub代码 (Our Demo and GitHub Code)

Here’s what our technique will look like:

这是我们的技术如下所示：

See the Pen responsive-image by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上SitePoint ( @SitePoint )提供的Pen 响应图像。

Download the code from GitHub

从GitHub下载代码

HTML (The HTML)

We’ll start with some basic HTML to implement our progressive image:

我们将从一些基本HTML开始，以实现我们的渐进式图像：

<a href="full.jpg" class="progressive replace">
  <img src="tiny.jpg" class="preview" alt="image" />
</a>

where:

哪里：

full.jpg is our large full-resolution image contained in the link href, and
full.jpg是链接href包含的大型高分辨率图像，并且
tiny.jpg is our tiny preview image.
tiny.jpg是我们的微型预览图像。

We already have