2017-08-10 19 views
1

私はレンダリング画像ブロッキングを排除する必要があると私はそれがすべてのブラウザのために良いですか、このプラグインhttps://plugins.jquery.com/lazyload/を使用することをお勧めします。この遅延ロードに最適な方法は何ですか?

<img data-src> 

$('img').each(function() { 
    $(this).attr('src', $(this).data('src')); 
}); 

のために、この小さなスクリプトを使用できますか?あなたが現れて壊れた画像アイコンを避けるために、このCSSルールを追加することができます

答えて

1

img[src=''], 
img:not([src]) { 
    opacity: 0; 
} 

この方法は、無SRCの画像が表示されません。

+0

ありがとうございました。私はこれを加えます – Miky

1

あなたのコードはすべてのブラウザで動作するはずですが、そのレイジーロードプラグインの機能の一部を使用することができます。たとえば、実際に必要なときに画像を読み込むことができます(つまり、遅延型)。ユーザが視認可能な領域外にある場合は避けてください。誰も必要がない場合でも、コードはすべての画像を同時にダウンロードしようとします。

<noscript> 
    <img alt="…" src="…"/> 
</noscript> 

<img alt="…" data-src="…"/> 
+0

noscriptに感謝します – Miky

1

実際には、ややゆったりとデフォルトの負荷画像によってブラウザ:

は、JavaScriptが有効になっていませんロボットやユーザー向けのサポートを追加することを検討してください。 Webページの上のイメージは、残りの部分のレンダリングを中断しません。画像データがサーバブラウザから取り出されると、他の要素をレンダリングするのに並行して、画像用に予約された空間がペイントされる。

あなたのコードはイメージを生成し、DOMにアタッチせずに読み込みます。それは遅延読み込みではなく、ある状況ではあらかじめロードされているかもしれません。

遅延ロードは、ブラウザの表示ポートで予約領域が表示されるまでサーバーからイメージをダウンロードし始めません。あなたのページがビューポートよりも長く、その位置がページの下部にとどまっているような場合に使用されます。その位置にスクロールするまで、画像はロードされません。

遅延ロードの利点を利用するには、プラグインオプションを選択する必要があります。

+0

すみません。しかし、私はページあたり10枚の画像200x100しか持っていないので、ページをスピードアップするために画像をロードするだけでいいのですが、1ページあたり10枚の画像だけにプラグインを追加することをお勧めしますか? – Miky

+0

@Milky私は10個の小さな画像について考えると、遅延読み込みを実装しなければ問題はありません。レイジーローディングを実装しないでページの読み込み時間を高速化するため、https://tinyjpg.com/などのツールで画像を圧縮することをお勧めします。しかし、それ以外のものをロードした後にイメージをロードする必要がある場合は、これらのhttps://stackoverflow.com/questions/12396068/speed-up-page-load-by-deferring-imagesおよびhttps://varvy.comを参照してください。 /pagespeed/defer-images.html – ihpar

関連する問題