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

淩亂°似流年 2022-12-03 01:48 86阅读 0赞

渐入渐出的图像融合算法

![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][]上遇到了渐进式图像。 当元素滚动到视图中时，模糊的低分辨率图像将替换为全分辨率版本：

![progressive image example][]

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
    
    支持[响应图像][responsive images]以加载更大或更高分辨率(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][SitePoint]) on [CodePen][].

请参阅[CodePen][SitePoint]上[SitePoint][CodePen] ( [@SitePoint][SitePoint] )提供的Pen [响应图像][responsive-image] 。

[Download the code from GitHub][]

[从GitHub下载代码][Download the code from GitHub]

## HTML **(**The HTML**)** ##

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

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

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 a minimal working system. Without any JavaScript – or in older browsers where it may fail – the user can view the full image by clicking the preview.

我们已经有一个最低限度的工作系统。 在没有任何JavaScript的情况下-或在可能会失败的旧版浏览器中-用户可以通过单击预览查看完整图像。

Both images must have the same aspect ratio. For example, if `full.jpg` is 800 x 200, it has a resulting aspect ratio of 4:1. `tiny.jpg` could therefore be 20 x 5 but you should not use a 30px width which would require a fractionally impossible 7.5px height.

两个图像必须具有相同的纵横比。 例如，如果`full.jpg`为800 x 200，则其最终纵横比为4：1。 `tiny.jpg`因此可能是20 x 5，但您不应使用30px的宽度，而这将需要7.5px的高度。

Note the classes used on the link and the preview image; these will be used as hooks in our JavaScript code.

注意链接和预览图像上使用的类； 这些将用作我们JavaScript代码中的钩子。

### 内联或不内联图像 **(**To Inline or Not Inline Images**)** ###

The preview image can also be inlined as a data URI, e.g.

预览图像也可以作为数据URI内联，例如

Inlined images appear instantly, require fewer HTTP requests and avoid additional page reflows. However:

内联图像立即出现，需要较少的HTTP请求，并避免了其他页面重排。 然而：

*  it takes more effort to add or change an inline image *(although build processes such as [Gulp][] can help)*
    
    添加或更改嵌入式图像需要花费更多的精力*(尽管诸如[Gulp之类的][Gulp]构建过程可以提供帮助)*
 *  base-64 encoding is less efficient and is typically 30% larger than binary data *(although this is offset by additional HTTP request headers)*
    
    base-64编码效率较低，通常比二进制数据大30％ *(尽管这会被其他HTTP请求标头抵消)*
 *  inlined images cannot be cached. They will be cached in the HTML page but could not be used on another page without re-sending the same data.
    
    内联图像无法缓存。 它们将被缓存在HTML页面中，但是在不重新发送相同数据的情况下不能在其他页面上使用。
 *  HTTP/2 lessens the need for inline images.
    
    HTTP / 2减少了对嵌入式图像的需求。

Be pragmatic: inlining is a good option if the image is used on a single page or the resulting code is small, i.e. not much longer than a URL!

务实：内联是一个很好的选择，如果图像在单个页面上使用或生成的代码很小，即不长于URL！

## CSS **(**The CSS**)** ##

We start by defining the link container styles:

我们首先定义链接容器样式：

a.progressive {
      position: relative;
      display: block;
      overflow: hidden;
      outline: none;
    }

This sets the essential container layout properties. The link can have other classes and styles applied to set the dimensions or position if required.

这将设置基本的容器布局属性。 如果需要，链接可以应用其他类和样式来设置尺寸或位置。

You could consider setting the exact dimensions or using [the `padding-top` trick to enforce an intrinsic aspect ratio][the _padding-top_ trick to enforce an intrinsic aspect ratio]. This would ensure the container is sized before the image loads and reflows are avoided. However, it would be necessary to calculate the size and/or width:height ratios for every image. I’ve chosen to keep it simple:

您可以考虑设置确切的尺寸或使用[`padding-top`技巧来强制固有的宽高比][the _padding-top_ trick to enforce an intrinsic aspect ratio] 。 这将确保在避免图像加载和回流之前确定容器的大小。 但是，有必要计算每个图像的大小和/或宽度：高度比。 我选择保持简单：

*  the preview and large images must have an identical aspect ratio *(see above)*
    
    预览图像和大图像必须具有相同的宽高比*(请参见上文)*
 *  the preview image will define the height of the container almost instantly because it is in-lined or loads quickly.
    
    预览图像几乎可以立即定义容器的高度，因为它是内联的或快速加载的。

Again, be pragmatic. Performance will improve if you define container widths and heights but will be especially noticeable on pages with lots of images, e.g. a gallery (where all images are likely to have the same aspect ratio anyway).

再次，务实。 如果定义容器的宽度和高度，性能将会提高，但是在包含大量图像的页面上(例如图库(无论如何，所有图像都可能具有相同的长宽比))尤其明显。

The `replace` class on the container is removed when the full image loads and the click is disabled. Therefore, we can remove the standard link pointer:

加载完整图像并禁用单击后，将删除容器上的`replace`类。 因此，我们可以删除标准链接指针：

a.progressive:not(.replace) {
      cursor: default;
    }

The preview and large images within the container are sized according to the container width:

容器中的预览图像和大图像的大小取决于容器的宽度：

a.progressive img {
      display: block;
      width: 100%;
      max-width: none;
      height: auto;
      border: 0 none;
    }

Note that `height: auto` is required or IE10/11 may miscalculate the image’s height.

请注意， `height: auto`必须为`height: auto` ，否则IE10 / 11可能会错误计算图像的高度。

The preview image is blurred using a length of `2vw` which ensures the blur amount looks similar regardless of the page dimensions. The `overflow: hidden` applied to the container provides a hard edge to the image. It is also scaled by 1.05 to prevent the page background color showing through the blurred outer edge of the image. This also means we can use a pleasing zoom effect to reveal the full image.

预览图像使用`2vw`的长度进行模糊处理，无论页面大小如何，都可以确保模糊量看起来相似。 `overflow: hidden`应用于容器为图像提供了硬边缘。 它还按1.05缩放，以防止页面背景颜色通过图像的模糊外边缘显示。 这也意味着我们可以使用令人愉悦的缩放效果来显示完整图像。

a.progressive img.preview {
      filter: blur(2vw);
      transform: scale(1.05);
    }

Finally, we define styles and animations for the full image when it is revealed:

最后，我们在显示完整图像时定义样式和动画：

a.progressive img.reveal {
      position: absolute;
      left: 0;
      top: 0;
      will-change: transform, opacity;
      animation: reveal 1s ease-out;
    }
    
    @keyframes reveal {
      0% {transform: scale(1.05); opacity: 0;}
      100% {transform: scale(1); opacity: 1;}
    }

The full image is positioned above the preview then has the opacity increased from 0 to 1 and the scale changed from 1.05 to 1 over one second. You can apply other transformation and/or filter effects as required.

整个图像位于预览上方，然后将不透明度从0增大到1，并且比例在一秒钟内从1.05变为1。 您可以根据需要应用其他变换和/或滤镜效果。

## JavaScript **(**The JavaScript**)** ##

We’re practising responsible progressive enhancement so the JavaScript code initially checks whether the required browser APIs are available before adding a `load` event listener to the page:

我们正在实践负责任的渐进增强功能，因此JavaScript代码在向页面添加`load`事件侦听器之前会先检查所需的浏览器API是否可用：

// progressive-image.js
    if (window.addEventListener && window.requestAnimationFrame && document.getElementsByClassName) window.addEventListener('load', function() {

The `load` event is fired when the page and all assets have completed loading. We do not want large images to start loading before essential resources such as fonts, CSS, JavaScript and preview images are ready (which could happen if we used the [`DOMContentLoaded`][DOMContentLoaded] events which fires when the DOM is ready).

页面和所有资产均已完成加载时，将触发`load`事件。 我们不希望大型图像在字体，CSS，JavaScript和预览图像等基本资源准备就绪之前就开始加载(如果我们使用[`DOMContentLoaded`][DOMContentLoaded]事件(DOM准备就绪时将触发)，则可能会发生这种情况)。

Next, we fetch all image container elements with the class names `progressive` and `replace`:

接下来，我们获取所有类名称为`progressive`图像容器元素，并`replace` ：

var pItem = document.getElementsByClassName('progressive replace'), timer;

[`getElementsByClassName()`][getElementsByClassName] returns a live array-like HTMLCollection which changes as associated elements are added and removed from the page. The benefits will become apparent shortly.

[`getElementsByClassName()`][getElementsByClassName]返回一个类似于数组的实时HTMLCollection，它随着在页面中添加和删除关联元素而发生变化。 好处很快就会显现出来。

Next we’ll define an `inView()` function which determines whether each container is in the viewport by comparing its [`getBoundingClientRect`][getBoundingClientRect] position with the `window.pageYOffset` vertical scroll position:

接下来，我们将定义一个`inView()`函数，该函数通过将其容器的[`getBoundingClientRect`][getBoundingClientRect]位置与`window.pageYOffset`垂直滚动位置进行比较来确定每个容器是否在视口中：

// image in view?
    function inView() {
      var wT = window.pageYOffset, wB = wT + window.innerHeight, cRect, pT, pB, p = 0;
      while (p < pItem.length) {
    
        cRect = pItem[p].getBoundingClientRect();
        pT = wT + cRect.top;
        pB = pT + cRect.height;
    
        if (wT < pB && wB > pT) {
          loadFullImage(pItem[p]);
          pItem[p].classList.remove('replace');
        }
        else p++;
      }
    }

When the container is in view, its node is passed to a `loadFullImage()` function and the `replace` class is removed. This instantly removes the node from the `pItem` HTMLCollection so the container is never re-processed again.

在查看容器时，将其节点传递给`loadFullImage()`函数，并删除`replace`类。 这将立即从`pItem` HTMLCollection中删除该节点，因此不再需要再次处理该容器。

The `loadFullImage()` function creates a new HTML `Image()` object and sets its values as necessary, i.e. by copying the container’s `href` to the `src` attribute and applying a `reveal` class:

`loadFullImage()`函数创建一个新HTML `Image()`对象并根据需要设置其值，即通过将容器的`href`复制到`src`属性并应用一个`reveal`类：

// replace with full image
    function loadFullImage(item) {
      if (!item || !item.href) return;
    
      // load image
      var img = new Image();
      if (item.dataset) {
        img.srcset = item.dataset.srcset || '';
        img.sizes = item.dataset.sizes || '';
      }
      img.src = item.href;
      img.className = 'reveal';
      if (img.complete) addImg();
      else img.onload = addImg;

An internal `addImg` function is called once the image has loaded:

加载图像后，将调用内部`addImg`函数：

// replace image
      function addImg() {
        // disable click
        item.addEventListener('click', function(e) { e.preventDefault(); }, false);
    
        // add full image
        item.appendChild(img).addEventListener('animationend', function(e) {
          // remove preview image
          var pImg = item.querySelector && item.querySelector('img.preview');
          
          if (pImg) {
            e.target.alt = pImg.alt || '';
            item.removeChild(pImg);
            e.target.classList.remove('reveal');
          }
        });
      }
    }

This code:

这段代码：

*  disables the click event on the container
    
    禁用容器上的click事件
 *  appends the image to the page which starts the fade/zoom animation
    
    将图像附加到开始淡入/缩放动画的页面
 *  waits for the animation to end using the `animationend` listener then copies the `alt` tag, deletes the preview image node and removes the `reveal` class from the full image. This step aids performance and also prevents some strange shearing problems when the Edge browser is resized.
    
    使用`animationend`侦听器等待动画结束，然后复制`alt`标签，删除预览图像节点并从完整图像中删除`reveal`类。 当调整Edge浏览器的大小时，此步骤有助于提高性能，并防止一些奇怪的剪切问题。

Finally, we must call the `inView()` function to check whether any progressive image containers are visible on the page when it first runs:

最后，我们必须调用`inView()`函数来检查页面首次运行时是否在页面上可见任何渐进式图像容器：

inView();

We must also call the function when the page is scrolled or the browser is resized. Some older browsers *(yes, primarily IE)* can react to those events very rapidly so we’ll throttle the callback to ensure it cannot be called any more than once every 300 milliseconds:

当页面滚动或调整浏览器大小时，我们还必须调用该函数。 一些较旧的浏览器*(是的，主要是IE)*可以非常Swift地响应这些事件，因此我们将限制回调，以确保每300毫秒调用一次回调不会超过一次：

window.addEventListener('scroll', scroller, false);
    window.addEventListener('resize', scroller, false);
    
    function scroller(e) {
      timer = timer || setTimeout(function() {
        timer = null;
        requestAnimationFrame(inView);
      }, 300);
    }

Note the call to [`requestAnimationFrame`][requestAnimationFrame] which runs `inView` prior to the next repaint.

注意对下一个重新绘制之前运行`inView` [`requestAnimationFrame`][requestAnimationFrame]的调用。

## 响应式图像 **(**Responsive Images**)** ##

The HTML5 image `srcset` and `sizes` attributes define multiple images at different sizes and resolutions. The browser then selects the most appropriate version for the device.

所述HTML5图像`srcset`和`sizes`属性定义在不同的尺寸和分辨率的多个图像。 然后，浏览器选择最适合该设备的版本。

The code above supports this feature – add `data-srcset` and `data-sizes` attributes to the link container, e.g.

上面的代码支持此功能–将`data-srcset`和`data-sizes`属性添加到链接容器，例如

After loading, the full image code will be:

加载后，完整的图像代码将为：

Modern browsers will load `large.jpg` when the viewport width is 800px or higher. Older browsers and those with a smaller viewport width will receive `small.jpg`. For more information, refer to [How to Build Responsive Images with srcset][responsive images].

当视口宽度为800px或更高时，现代浏览器将加载`large.jpg` 。 较旧的浏览器和较小的视口宽度的浏览器将收到`small.jpg` 。 有关更多信息，请参阅[如何使用srcset构建响应图像][responsive images] 。

## 使用说明 **(**Usage Notes**)** ##

I’ve kept the code small but feel free to use or improve it on any project. Enhancements to consider:

我将代码保持较小，但是随时可以在任何项目上使用或改进它。 需要考虑的增强功能：

*  Horizontal scroll checking. Only vertical scrolling is checked so all images in the horizontal plane are replaced.
    
    水平滚动检查。 仅检查垂直滚动，因此将替换水平面中的所有图像。
 *  Dynamically adding progressive images. Progressive images added to a page using JavaScript are only replaced when a scroll or resize event occurs.
    
    动态添加渐进图像。 仅当发生滚动或调整大小事件时，才替换使用JavaScript添加到页面的逐行图像。
 *  Firefox performance. The browser can struggle when replacing large images — you may see a noticeable flicker.
    
    Firefox的性能。 替换大图像时，浏览器可能会遇到麻烦-您可能会看到明显的闪烁。

Please [tweet me @craigbuckler][tweet me _craigbuckler] if you find it useful.

如果发现有用，请[发给我@craigbuckler][tweet me _craigbuckler] 。

> 翻译自: [https://www.sitepoint.com/how-to-build-your-own-progressive-image-loader/][https_www.sitepoint.com_how-to-build-your-own-progressive-image-loader]

渐入渐出的图像融合算法

[A magician revealing an image via progressive image loader]: /images/20221123/d096e13fdc6e49eab29e06e6ef16fad7.png
[Facebook]: https://code.facebook.com/posts/991252547593574/the-technology-behind-preview-photos/
[Medium]: https://jmperezperez.com/medium-image-progressive-loading-placeholder/
[progressive image example]: /images/20221123/314b8a0c7a13410db1f36c9435533660.png
[responsive images]: https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/
[responsive-image]: http://codepen.io/SitePoint/pen/VPVEZm/
[SitePoint]: http://codepen.io/SitePoint
[CodePen]: http://codepen.io
[Download the code from GitHub]: https://github.com/craigbuckler/progressive-image.js
[Gulp]: http://gulpjs.com/
[the _padding-top_ trick to enforce an intrinsic aspect ratio]: https://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/
[DOMContentLoaded]: https://developer.mozilla.org/en/docs/Web/Events/DOMContentLoaded
[getElementsByClassName]: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
[getBoundingClientRect]: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
[requestAnimationFrame]: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
[tweet me _craigbuckler]: https://twitter.com/craigbuckler
[https_www.sitepoint.com_how-to-build-your-own-progressive-image-loader]: https://www.sitepoint.com/how-to-build-your-own-progressive-image-loader/