Html5圖像像素化加載

Question

在我的網站中，圖像從上到下加載，我如何更改圖像以便像素化時加載圖像，例如在Google地圖上放大時的圖像？

Answer 1

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

這裏是正在發生的事情：

1. 渲染該圖像將顯示一個div。 Medium使用一個填充底部設置爲百分比，這對應於圖像的高寬比。因此，當圖像被加載時，它們防止迴流，因爲所有內容都被渲染到最終位置。這也被稱爲內在佔位符。

2. 加載一個很小的圖像版本。目前，他們似乎在以非常低的質量（例如20％）請求小型JPEG縮略圖。這個小圖像的標記在初始HTML中作爲一個返回，因此瀏覽器開始立即獲取它們。

3. 一旦圖像被加載，它被繪製在一個。然後，獲取圖像數據並通過自定義blur（）函數在main-base.bundle JS文件中可以看到它，有點混亂。這個函數與StackBlur的模糊函數類似，雖然不相同。同時，請求主圖像。

4. 一旦加載了主圖像，就會顯示它，並且畫布被隱藏。

由於應用了CSS動畫，所有的轉換都非常流暢。

一個例子fromo頁：

<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重新創建自己的效果。

對不起，我的第一個答案，如果它不是你要找的。