在我的网站上,图像是从上到下加载的,我如何才能改变它,使图像以像素加载,就像在谷歌地图上一样,当你放大的时候?
发布于 2017-06-08 06:48:20
或者,如果你想要一个像素化/渲染模糊,你可以看这里:https://www.google.com/amp/s/jmperezperez.com/medium-image-progressive-loading-placeholder/amp/
下面是正在发生的事情:
由于应用了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,以便自己重新创建效果。
如果我的第一个答案不是你想要的,我很抱歉。
https://stackoverflow.com/questions/18440056
复制相似问题