Blogger 画像多用の Blog に LazyLoad を

Blogger の皆さん、画像を使ってますかぁ。
この Blog は、文章中心なので、然程、画像は多くないですが、Blog に依っては、
大きな画像を しこたま テンコ盛り の賑やかなのも多いですね。
ShiroYuki_Mot も、写真を中心にした Blog を別に持ってますが、ページを開くのがのんびりでした。


最初は、画像を Internet 経由で読み込んでるから、ショウガナイのかなあ って ... 。
他の Blog を覗いて見ても、早い処もあれば、遅い処も。
何が違うんだろうって、いつもの様に、ぼ～　と感じていました。

あるキッカケで、少し、調べて見るかぁ　となったのですが、　それは、また、改めて別投稿で。

速く出来るんですね。
所謂、Lazy Load って奴です。　遅延読み込み。
最初に、必要な部分だけ読み込んで、ページの外の未表示の画像は後回しにする様です。
スクロール指示で、画面表示が要求された時に、改めて、読みに行く様です。
このため、 Lazy Load って呼ばれてるんですね。


今回、対応策として、やった事を纏めましょう。
　　　あっ、この Blog では以下の対応策は適応していません。　　別の Blog が対象です。

以下の、HTML をテンプレートに埋め込みます。

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWFyf4Ezaxp1nvfsiJRvopYeRZCZ90dfIE7K37kYBQxUcmIMMSoOAd7ojMA0m4-qgs0QQdQ0IfL44IEkF_Sq58HoCMT1iY7Hqd7uJJyIQS0RPFDetbWVudq-PfQw5gLPziKLefSXho7Wvu/s1600/best+blogger+tips.png'/></a><script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
 <script src='http://pwam.googlecode.com/files/jquery.lazyload.js' type='text/javascript'/>
 <script charset='utf-8' type='text/javascript'>
 $(function() {
 $(&quot;img&quot;).lazyload({placeholder : &quot;http://pwam.googlecode.com/files/grey.gif&quot;,threshold : 200});
 });
 </script>

埋め込む位置は、 </head>　の前。　　（ head ブロック要素の最後に記述します。 ）
Copy and paste the following code Directly Before / Above </head>　　以下のサイトの説明から引用

これは、以下の英文のサイトで見付けました。　Blogger 対象に書かれた投稿です。

　　http://www.spiceupyourblog.com/2010/09/speed-up-blog-lazy-load-plugin.html
　　Speed Up Your Blog With The The Lazy Load Plugin | Spice Up Your Blog        Author : Mr. Paul Crowe


基本的には、これだけです。　　
これで、最初のサイト表示の所要時間が改善されます。


さて、ここからは応用編。

先に述べた様に、これで初期表示の時間短縮は図れましたが、ひとつ問題があります。
スクロール先にも、画像が沢山あった時には、また、もとの　のんびり　モード　なのです。

これは、HTML 記述中の　赤い字　200　を　400 (~600)　に変える事で、少しは改善されます。
threshold は、先読みする範囲を指定するので、これを若干大きめに設定する事で回避します。


まだ、試行錯誤の最中でして、他の対応策や方法があると思っています。
取り敢えず、今回は、上記の方法で逃げてみました　って事で ... 。