Html5 imageピクセルロード

Question

私のウェブサイトでは、イメージは上から下に読み込まれますが、どのようにしてイメージをピクセル単位で読み込むことができますか？あなたがピクセル化/レンダリングぼかしをしたい場合は

Answer 1

または、こちらになります：https://www.google.com/amp/s/jmperezperez.com/medium-image-progressive-loading-placeholder/amp/ここ

は何が起こっているされています

1. は、画像が表示されますdiv要素をレンダリングします。ミディアムは、パディングボトムをパーセントで設定したaを使用します。これは画像の縦横比に相当します。したがって、画像がロードされている間にすべてが最終位置にレンダリングされるので、それらはリフローを防止します。これは、固有のプレースホルダとも呼ばれています。

2. イメージの小さなバージョンを読み込みます。現時点では、画質が非常に低い（例：20％）小さなJPEGサムネイルを要求しているようです。この小さな画像のマークアップは最初のHTMLに返され、ブラウザはすぐにそれらを取得し始めます。

3. イメージがロードされると、イメージが描画されます。次に、イメージデータが取得され、カスタムのblur（）関数に渡されます。main-base.bundle JSファイルで、スクランブルされていることがわかります。この関数はStackBlurのblur関数と似ています（同一ではありません）。同時に、主画像が要求される。

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が効果自分自身を再作成するatemptに、設定このCodePenをチェックアウトすることができます：ページfromo

例。

あなたが探していたものではない場合は、私の最初の答えについて申し訳ありません。