18

在我的网站中，图像是从上到下加载的，我该如何更改它以使图像以像素化方式加载，例如在 Google 地图上何时放大？

4

1 回答 1

9

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

这是发生了什么：

  1. 渲染一个将显示图像的 div。中使用 a 并将 padding-bottom 设置为百分比，该百分比对应于图像的纵横比。因此，它们可以在加载图像时防止回流，因为所有内容都在其最终位置呈现。这也被称为固有占位符。

  2. 加载图像的微小版本。目前，他们似乎在请求质量非常低（例如 20%）的小型 JPEG 缩略图。这个小图像的标记在初始 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>

或者您可以查看JMPerez 设置的这个CodePen ，尝试自己重新创建效果。

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

于 2017-06-07T22:48:19.930 回答