これ以上苦労せずに、例を見てください
まず第一に、絵のマークを書く方法
<img data-src = "/image/yigas.jpg">
画像のアドレスをdata-src属性に配置する必要があります。SRC srcは必要ありません。そのため、 src属性を直接削除できます。
CSSコード
data-src属性を備えたすべての画像について、最初にステータスを見えないように表示し、透明性を通じて調整します。
img {不透明：1;トランジション：不透明0.3S;} img [data-src] {opacity：0;}このように書く目的は何ですか？画像がロードされると、効果がわかります。
JavaScriptコード
最終的には、 data-src属性を削除し、SRC属性に置き換えますが、これは画像が正常にロードされた後のアクションです。
[] .foreach.call（document.queryselectorall（ 'img [data-src]'）、function（img）{img.setattribute（ 'src'、 'src'、 'data-src'））; img.onload = function（）{img.removeattribute（ 'data-src'）;};};};};他のさまざまな画像遅延ロードテクノロジーと比較して、この方法は非常に簡単です。他の条件はほとんど必要ありませんし、どこでも使用できます。使用するのは非常に柔軟です。
しかし、シンプルさには最高か悪いか、そしてシンプルさのためにも不十分であることに注意する必要があります。写真を視覚ウィンドウにスクロールしてからロードする機能はありません。最終的に使用するテクノロジーは、シナリオに依存します。
上記はこの記事に関するものです。みんなの仕事や勉強に役立つことを願っています。