クサイダー速報

違うネタバレ専用サイトに移転しました どこかは言えない

画像のロードを遅延し、ブログの表示を高速化するJavascript 「Lazy Load」

オススメ記事

前回に続いてはてなブログのカスタマイズについて紹介します。 今日は画像の読み込みを遅らせて、ブログの表示を高速化するJavascript 「Lazy Load」の紹介と。導入方法について語ります。

Lazy Load

はじめに

ついこの間、かけすけ (id:kakesuke)様のブログを読んで"高速化"は重要だなと思いました。 今日は画像を遅延読み込みする方法の紹介です。

ブログの読み込みを少しでも速くするために、「JPEGmini」と「TinyPNG」で画像を軽量化! - Hike×Hackブログの読み込みを少しでも速くするために、「JPEGmini」と「TinyPNG」で画像を軽量化! - Hike×Hack

こんにちは! Hike×Hackのかけすけ(@kakesuke02)です!「ブログの読み込み速度」って、とっても大事です。たとえばの話、この記事が表示されるのに...

   画像を含むブログをブラウザで表示する場合、画像がたとえ表示されないとしても、すべての画像ダウンロードされてしまいます。そのため、多数の画像が配置されているブログ場合、長いロード時間を費やしてしまいます。

 

 そこで今回は、Lazy Loadというスクリプトを用いて、画像が画面内にスクロールされた時に画像を読み込むという方法を紹介していきます。

で、必要な物は?

jQuery

最新のブラウザ

根気

 といろいろあるのですが、「最新のブラウザ」に関してはほとんどのブラウザで大丈夫でしょう。 「jQuery」は一緒に導入します。 「根気」は....知らないぞ.....知らないって言ったからな.....

導入方法

本来、Lazy Loadを導入するのはかなり面倒です。 全ての画像に「class="lazy"」というものを付けなくてはなりません。 で・す・が、今回はコピペだけで基本的にできるのでご安心を。  タブを閉じなくて良かったね((;゚∀゚)

 

注:ここからの説明は、はてなブログを使用している事を前提にしています。

 

1. HTMLをフッターに追加

f:id:narutonetabare:20140429200423j:plain

以下のHTMLをどこでもいいので追加する

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

<!-- SCRIPT : Lazyload -->

<script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>

<script type="text/javascript" charset="utf-8">

var $j = jQuery.noConflict();

$j(function() {

if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;

$j("img.hatena-fotolife").lazyload({

placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",

effect: "fadeIn",

});

});

</script> 

 2. 終了w

f:id:narutonetabare:20140507093846j:plain

これで終了です!!

と言いたいのですが、注意点があります。 はてなフォトライフを使って画像をアップロードしている方はこれで良いのですが、外部の画像(Instagramなど)から画像を引用している場合は、注意が必要です。 このスクリプトでは、class="hatena-fotolife"と指定されている画像を遅延読み込みしているだけなので、Instagramから引用した写真にclass="hatena-fotolife"を付けるようにして下さい。

 

全て遅延ロードにしてもいいけど...

全て遅延ロードにしてもいいのですが、サイドバーの最新記事に使用されている画像が表示できないなど不具合があったので、クサイダーは使用していません。 不具合覚悟で、全ての画像を遅延ロードさせたい方は以下のコードを使用してください。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

<!-- SCRIPT : Lazyload -->

<script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>

<script type="text/javascript" charset="utf-8">

var $j = jQuery.noConflict();

$j(function() {

if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;

$j("img").lazyload({

placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",

effect: "fadeIn",

});

});

 

</script> 

 変更点: img.hatena-fotolife → img

img.hatena-fotolifeはclass="hatena-fotolife"の画像を示しているので、imgに変えることで、全ての画像を対象に含める事が出来ます。

 

まとめ

Lazy Loadを使う事で、ブログのロード時間を縮められる他、

・画像をふわっと表示させる

・通信量の削減

・自分的に満足

などという追加効果を得る事が出来ます。

 

みなさんも試してみてはいかがでしょうか?

 

役に立ったらシェアをお願いします