画像の遅延読み込みだけでなく ウェブページは年齢のパフォーマンスに役立ちます、だけでなく、 検索エンジン最適化 観察されたように。 あなたが使用することができます jQuery、さらにはMootools 画像の遅延読み込み用。 画像は、スクロールしたときにのみ表示されます。
このjQueryのヒントは、ページの読み込み中に多くの外部リクエストを減らし、最終的にWordPressブログの読み込みを高速化するのに役立ちます。 このトリックを使用している間は、ページの読み込みを簡素化するためにキャッシュテクニックも使用する必要があります。
遅延読み込みとは何ですか？
遅延読み込みとは、コンテンツを一度にダウンロードするのではなく、必要に応じてダウンロードすることです。
遅延読み込みは、インターネットで使用される最適化手法です。 最初に必要なWebページのセクションのみをロードし、クリックするまで他のパーツはロードしません。 このように、最初から最後まですべての情報をロードする必要はありません。
遅延読み込みのXNUMXつの形式は、無限スクロールと呼ばれます。 これは、ページを下にスクロールすると、より多くのコンテンツが自動的に読み込まれることを意味します。
遅延読み込みが重要なのはなぜですか？
Webページの巨大なペイロードは、画像、スクリプト、スタイルシート、フォント、およびビデオでいっぱいです。 画像がかかります 60％以上 典型的なウェブページのサイズの。 それらはウェブページのデザインにとって重要であるため、それらを取り除くことはできません。
最適化を行わないと、Webブラウザはページをレンダリングする前にすべてをダウンロードします。 これにより、ページの読み込みが遅くなります。
Webページの読み込みを高速化するためにできることを実行するのは理にかなっています。 そして、画像に関して言えば、画像はWebサイトのサイズに最も大きく貢献しています。
したがって、それらから始める場合は、Webサイトの読み込みが速くなるため、これは良い考えです。 これは、遅延読み込みが便利な場合です。これは、ページに表示されている画像の一部のみをダウンロードするためです。
jQueryで遅延読み込みを設定する方法は？
簡単なことを実行できるプラグインがありますが、使用するプラグインが少なければ少ないほど、ブログはより効率的になります。
使用しているWordPressテーマに関係なく、遅延読み込みを非常に簡単に実装できます。
これはXNUMX段階のチュートリアルです。XNUMXつはjQueryを追加するためのもので、もうXNUMXつは、WordPressブログで特定の画像を遅延ロードする場合に、imgタグにクラスを割り当てることです。
これがjQuery関数で、テーマのスクリプトに追加する必要があります。
/ * lazyload.js（c）Lorenzo Giuliani * MITライセンス（http://www.opensource.org/licenses/mit-license.html）* /！function（window）{var $ q = function（q、res） {if（document.querySelectorAll）{res = document.querySelectorAll（q）; } else {var d = document、a = d.styleSheets [0] || d.createStyleSheet（）; a.addRule（q、 'f：b'）; for（var l = d.all、b = 0、c = []、f = l.length; b = 0 && rect.left> = 0 && rect.top）} var images = new Array（）、query = $ q（ 'img.lazy'）、processScroll = function（）{for（var i = 0; i <images.length; i ++）{if（elementInViewport（images [i]））{loadImage（images [i]、 function（）{images.splice（i、i）;}）; }}; }; // Array.prototype.slice.callは、私たちの素敵なIE8では呼び出しできませんfor（var i = 0; i <query.length; i ++）{images.push（query [i]）; }; processScroll（）; addEventListener（ 'scroll'、processScroll）; }（これ）;
<img src="blank.gif" class="lazy" data-src="/images/full-size.jpg" width="240" height="152"></a>
そして、jQuery関数を呼び出して、画像の遅延読み込みを動的に実装する方法を次に示します。 jQuery関数を使用してロードするすべての画像にレイジークラスを使用する必要があります。
まとめ
Lazyloadは、ブログや企業のWebサイトに適しています。 それはSEOに役立ち、Googleはそれを見ることができます。 ただし、遅延読み込みがどのように機能するかを知っているので、これについて心配する必要はありません。
アニメーションを変更して遅延を追加することで、必要に応じてカスタマイズすることもできます。
こんにちは、
良い情報でとても参考になります。 怠惰私は画像を表示するためにテーマを使用していたので、それは非常に役に立ちます。
良い仕事と続けて…！