画像の高速でスムーズな読み込みは、優れたWebインターフェイスの重要なコンポーネントの1つです。 さらに、デザインで大きな写真を使用するサイトが増えています。そのようなプロジェクトでは、グラフィックの正しいロードを監視することが特に重要です。 この記事では、画像の読み込みを制御するのに役立ついくつかの手法について説明します。
各画像にコンテナを使用する
サイト上の任意の画像に適用できる簡単な方法。 これは、各ピクチャがDIVでラップされているため、行ごとの読み込みができません。
<div class="img_wrapper"> <img src="comicbookguy.jpg" alt=""/> </div>
コンテナを使用すると、画像の縦横比を制御したり、ダウンロードインジケータを使用したりできます。これは、画像が重い場合に非常に便利です。
たとえば、アスペクト比を4：3に設定するには、次のCSSを使用できます。
.img_wrapper{ position: relative; padding-top: 75%; overflow: hidden; } .img_wrapper img{ position: absolute; top: 0; width: 100%; opacity: 0; }
画像が完全に読み込まれた後にのみブラウザに表示されるようにするには、画像のonloadイベントを追加し、イベントを処理するJavaScriptを使用する必要があります。
<div> <img src="comicbookguy.jpg" alt="" onload="imgLoaded(this)"/> </div>
function imgLoaded(img){ var $img = $(img); $img.parent().addClass('loaded'); };
HEADタグ内の関数コードは、jQueryまたは別のプラグインの最後に配置する必要があります。 イメージが完全にロードされたら、ページに表示する必要があります。
.img_wrapper.loaded img{ opacity: 1; }
画像の滑らかな外観の効果のために、CSS3トランジションを使用できます：
.img_wrapper img{ position: absolute; top: 0; width: 100%; opacity: 0; -webkit-transition: opacity 150ms; -moz-transition: opacity 150ms; -ms-transition: opacity 150ms; transition: opacity 150ms; }
この方法の実例は
Codepenで
見ることができます。
複数の画像にコンテナを使用する
前の方法は個々の画像に適していますが、写真ギャラリーやスライダーなど、ページ上に多くの画像がある場合はどうでしょうか？ すべてを一度にアップロードするのは実用的ではありません。写真の重量が大きくなる可能性があります。 この問題を解決するために、特定の時間に必要な画像のみをJavaScriptにロードさせることができます。 スライドショーのHTMLマークアップの例：
<div id="Slideshow"> <img src="slide_1.jpg" alt="" onload="slideLoaded(this)" /> <img src="slide_2.jpg" alt="" onload="slideLoaded(this)" /> <img src="slide_3.jpg" alt="" onload="slideLoaded(this)" /> </div>
プロセスを制御するには、slideLoaded（）関数を使用します。
function slideLoaded(img){ var $img = $(img), $slideWrapper = $img.parent(), total = $slideWrapper.find('img').length, percentLoaded = null; $img.addClass('loaded'); var loaded = $slideWrapper.find('.loaded').length; if(loaded == total){ percentLoaded = 100;
ロードされた画像にはロードされたクラスが割り当てられ、全体的な進捗状況も表示されます。 繰り返しになりますが、JavaScriptはHEADタグの最後に配置する必要があります。
キャッシング
グラフィカルに重いサイトでは、ユーザーには見えないように、画像をバックグラウンドでブラウザキャッシュにダウンロードできます。 たとえば、多くのグラフィックコンテンツがある内部ページの1つに複数ページのサイトがあります。 この場合、ユーザーが目的のページに移動する前であっても、画像をキャッシュにロードすることをお勧めします。 配列内の画像のアドレス：
<script> var heroArray = [ '/uploads/hero_about.jpg', '/uploads/hero_history.jpg', '/uploads/hero_contact.jpg', '/uploads/hero_services.jpg' ] </script>
訪問者がサイトにアクセスすると、メインページを読み込んだ後、キャッシュ内の画像が読み込まれ始めます。 キャッシュが現在のコンテンツの表示に干渉しないようにするには、ウィンドウロードイベントにJavaScript機能を追加する必要があります。
function preCacheHeros(){ $.each(heroArray, function(){ var img = new Image(); img.src = this; }); }; $(window).load(function(){ preCacheHeros(); });
この方法により、サイトの使いやすさが向上しますが、サーバーに追加の負荷がかかります。 このような機能を導入するときは、これに留意する必要があります。 さらに、サイトへの訪問者の可能性のあるパスを考慮し、ユーザーが訪問する可能性が最も高いページにある画像をキャッシュする必要があります。 サイト上のこのようなパスを理解するには、トラフィック統計を分析する必要があります。
イベントダウンロード
この方法は、特定のイベントの後に画像の読み込みを開始することです。 これにより生産性が向上し、ユーザーのトラフィックが節約されます。 HTMLマークアップ：
<div class="img_wrapper lazy_load"> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="comicbookguy.jpg" alt="Comic Book Guy" /> </div>
URLイメージは、srcではなくdata-srcで指定されることに注意してください。 これは、ブラウザが画像をすぐにダウンロードしないようにするために必要です。 代わりに、base64で指定されたGIFの透明なピクセルがsrcに読み込まれ、サーバーへの呼び出し回数が削減されます。
目的のイベントのsrc値をdata-srcに変更するだけです。 JavaScriptを使用すると、画像を徐々に読み込むことができます。
function lazyLoad(){ var $images = $('.lazy_load'); $images.each(function(){ var $img = $(this), src = $img.attr('data-src'); $img .on('load',imgLoaded($img[0])) .attr('src',src); }); }; $(window).load(function(){ lazyLoad(); };
おわりに
サイトへの画像の読み込みを制御する最適な方法はありません。 いずれの場合も、適切な方法を選択し、必要に応じていくつかを組み合わせる必要があります。 注意が必要な主なポイントの1つは、パフォーマンスとトラフィックです。 簡単に言えば、まず、サイトのユーザーにとってより便利な方法を考える必要があります。
