Question

在我的网站中，图片是从上到下加载的，如何更改图片，以便图像加载到Pixelation中，就像在Google地图上放大时一样？

Answer 1

或者，如果你想要像素化/渲染模糊，你可以看一下：https://www.google.com/amp/s/jmperezperez.com/medium-image-progressive-loading-placeholder/amp/

以下是发生的事情：



渲染显示图像的div。 Medium使用带有填充底部设置的百分比，这对应于图像的纵横比。因此，它们会在图像加载时防止回流，因为所有内容都在最终位置呈现。这也被称为内在占位符。



加载图像的微小版本。目前，他们似乎要求质量非常低的小JPEG缩略图（例如20％）。这个小图像的标记在初始HTML中作为一个返回，因此浏览器会立即开始提取它们。



加载图像后，将其绘制成图像。然后，获取图像数据并通过自定义blur（）函数传递您可以在main-base.bundle JS文件中看到它，有点混乱。此功能与StackBlur的模糊功能类似，但不完全相同。同时，请求主图像。



加载主图像后，会显示该图像并隐藏画布。


由于应用了CSS动画，所有过渡都非常流畅。

页面上的一个例子：

<figure name="7012" id="7012" class="graf--figure graf--layoutFillWidth graf-after--h4">
  <div class="aspectRatioPlaceholder is-locked">
    <div class="aspect-ratio-fill" style="padding-bottom: 66.7%;"></div>
    <div class="progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded" data-image-id="1*sg-uLNm73whmdOgKlrQdZA.jpeg" data-width="2000" data-height="1333" data-scroll="native">
      <img src="https://cdn-images-1.medium.com/freeze/max/27/1*sg-uLNm73whmdOgKlrQdZA.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail">
        <canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="47"></canvas>
        <img class="progressiveMedia-image js-progressiveMedia-image __web-inspector-hide-shortcut__" data-src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg">
        <noscript class="js-progressiveMedia-inner">&lt;img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg"&gt;</noscript>
    </div>
  </div>
</figure>

或者你可以看一下J CodePen JMPerez的设置，试图自己重新创造效果。

如果不是你想要的话，我很抱歉我的第一个答案。

Html5图像像素化加载

1 个答案: