Html5图像像素化加载

Question

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

Answer 1

或者,如果您想要像素化/渲染模糊,可以在这里查看:https://www.google.com/amp/s/jmperezperez.com/medium-image-progressive-loading-placeholder/amp/

这是正在发生的事情:

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

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

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

4. 加载主图像后,将显示该图像并隐藏画布.

由于应用了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>

或者你可以看看这个CodePen这JMPerez成立,在atempt重新创建自己的效果.

如果不是你想要的,我很抱歉我的第一个答案.