Html5图像像素化加载
Html5图像像素化加载
提问于 2013-08-26 16:45:10
在我的网站上，图像是从上到下加载的，我如何才能改变它，使图像以像素加载，就像在谷歌地图上一样，当你放大的时候？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-06-08 06:48:20
或者，如果你想要一个像素化/渲染模糊，你可以看这里：https://www.google.com/amp/s/jmperezperez.com/medium-image-progressive-loading-placeholder/amp/
下面是正在发生的事情：
- 渲染将在其中显示图像的div。Medium使用填充底部设置为百分比的，该百分比对应于图像的纵横比。因此，它们可以在加载图像时防止回流，因为所有内容都在其最终位置进行渲染。这也被称为内部占位符。
- 加载该图像的一个微型版本。目前，他们似乎要求小的JPEG缩略图的质量非常低(例如20%)。这个小图片的标记在初始的超文本标记语言中以返回的形式返回，因此浏览器立即开始获取它们。
- 加载图像后，将在。然后，获取图像数据并通过自定义的blur()函数进行传递，您可以在main-base.bundle JS文件中看到它。此函数与StackBlur的blur函数相似，但不完全相同。同时，请求主图像。
- 加载主图像后，将显示主图像并隐藏画布。
由于应用了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"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg"></noscript>
</div>
</div>
</figure>或者，你可以查看JMPerez设置的这个CodePen，以便自己重新创建效果。
如果我的第一个答案不是你想要的，我很抱歉。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18440056
复制相关文章
相似问题