jQuery ページ読み込み高速化!読み込みのタイミングをずらす【Lazy Load】の実装方法

この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

こんばんは、今回のtipsは【jQuery ページ読み込み高速化、読み込みのタイミングをずらすLazy Loadの実装方法】です。PCのスペックも向上し読み込み容量も大きくなった為あまり活用する場もないかと思いますが、場合によっては非常に有効な手法です。

Lazy Load Plugin -download

シンプルなプラグインです。導入も簡単で軽量なため、色々と活用できそうです。読み込み遅延させたい要素を選択し、読み込みのエフェクトも追加できます。また公式HPには読み込みのタイミング(トリガー)の設定方法もありますので、詳しくはそちらをご参照ください。

実装例:jQuery

$(function(){
setTimeout(function(){
$("img.lazy").lazyload({
effect : "fadeIn"
});
},1000);
});
HTML

<img class="lazy" data-original="images/ABC.jpg" src="images/grey.gif" height="100px" width="100px">

その他

他にもsetTimeoutを使って個別に読み込みを遅延させる方法もあります。画像以外の部分にはこの方法を試しています。

Facebook LikeBoxを遅延読み込みさせる


$(function(){
setTimeout(function(){
var url = $(‘#url’).attr(‘alt’);
var fblike = ‘<iframe src="//www.facebook.com/plugins/likebox.php?href=’+ url +’&amp;width=690&amp;height=395&amp;colorscheme=light&amp;show_faces=false&amp;border_color&amp;stream=true&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:690px; height:395px;" allowTransparency="true"></iframe>’;
$(‘#fb’).html(fblike);
},3000);
});


<span id="url" alt="https%3A%2F%2Fwww.facebook.com%2FSuperChemical">url</span>
<div id="fb">ここにfacebook likeboxが記述されます。</div>

上記はどこかにURLが必要になります。例では直前のspanに格納していますが他の要素でもかまいませんしdisplay:none;しても良いので、各自最適な要素を選択してください。
 
以上になります。