ウェブDeBLOG｜トライデントコンピュータ専門学校 Webデザイン学科

ひょんな事から、スクロールにあわせて画像を読み込むようにしたくなり「Lazy Load Plugin for jQuery」を導入しました。



Firefox, Safari, Chrome, Operaで動作確認をしたので、下にスクロールすると画像がグレーからフェードインされて見られると思います。IEは学校に行ってから確認。（IE8で確認できました！）Lazy Load Pluginを導入したら、もともと入れていたLightbox2が効かなくなってしまって、Slimbox2に入れ替えるなどしてたら半日終了してました。ということで、導入方法など書いておきます。

導入「Lazy Load Plugin for jQuery」

Lazy Load Plugin for jQueryのサイトから「jquery.lazyload.mini.js」をダウンロードします。jQueryが無い場合はjQueryファイルもダウンロードします（最新バージョンは「jquery-1.4.3.min.js」）。
後は「jquery.lazyload.mini.js」と「jquery-1.4.3.min.js」アップロードして、javascriptのコードを記述するだけです。ところが、FC2ブログではファイル名に“.”と“/”が使用できないので、それぞれ「jquery_lazyload_mini.js」「jquery.js」と名前を変更します。
さらに、各画像の読み込みにフェードインのエフェクトをかけたかったので、グレー1pxのgif画像もアップロードしておきます。

<script type="text/javascript" src="hogehoge/jquery.js"></script>
<script type="text/javascript" src="hogehoge/jquery_lazyload_mini.js"></script>
<script type="text/javascript">
$(function() {
$(".main img").lazyload({
placeholder : "hogehoge/grey.gif",
effect : "fadeIn"
});
});
</script>

Slimbox2を導入

ここで、Lightboxが動作しない問題が発生しました。どうやらprototype.jsが効いてないようで、それでは「Lazy Load Plugin for jQuery」と同じjQueryを使ったものならとSlimbox2を導入。最初は「Lazy Load Plugin for jQuery」と「SlimBox2」を別々に記述していたのですが、Operaの挙動がおかしかったのでhead内にまとめて記述して、解決しました。

<script type="text/javascript" src="hogehoge/jquery.js"></script>
<script type="text/javascript" src="hogehoge/jquery_lazyload_mini.js"></script>
<script type="text/javascript" src="hogehoge/slimbox2.js"></script>
<link rel="stylesheet" href="hogehoge/slimbox2.css" type="text/css" media="screen" />
<script type="text/javascript">
$(function() {
$(".main img").lazyload({
placeholder : "hogehoge/grey.gif",
effect : "fadeIn"
});
});
</script>

自己満足ですが、ブログをイジってカスタマイズするのは楽しいですね。
上記のコードもカッコよくブログに表示しようと思ったら、またまたjavascriptを導入しないといけないらしく、いろいろ調べて試して、結局あきらめたりしたら、記事を書くのに時間が掛かってしまいました。
その間に、中日ドラゴンズ VS ロッテマリーンズの日本シリーズもドラゴンズが追いつかれ、逆転され、追いついて、延長で引き離されて負けてしまいました。また、来年に期待しましょう。


観戦に行っていた友人から、送られてきたロッテの優勝シーン。

参考サイト：
MONODEZ create our「画面のスクロールに合わせて画像を読み込むjQuery『Lazy Load Plugin for jQuery』」
BLUE DROPS「Lightbox→Slimbox変更(画像ギャラリー対応)＆設置方法」

追記（2012/10/27）：検索でよくヒットするようなので、追記しておきます。
lazyloadはバージョンアップして、上記の表記の仕方が変わりました。公式サイトで使い方が書いてあります。
ちなみにsrcにダミー画像を設定して、data-originalに画像をするというちょっと面倒な書き方なので現在は「ウェブDeBLOG」では使っていないです。