スクロール時に画像の読み込みを開始する Lazyload

今までの a-blog cms では jQuery のバージョンが 1.2.6 という事で、最新のプラグイン的なものが動作しないでいたので、あまり導入のチャレンジをしていませんでしたが、a-blog cms 1.3.0 になって jQuery も最新版になった事から気にせず使えるようになったのが、とても嬉しいですね。

今回のエントリーでは、jQueryのプラグインで見えてない部分は画像の読み込みをしないでおいて、スクロールして表示されるようになってから読み込む「Lazyload.js」というのを試してみましたので、その実装方法をメモっておきます。

以前は jquery.dimensions.js というものが必要だったようですが、jQuery に含まれる事になったようで、現在のバージョン(1.4.2) では読み込まなくても問題なく動作するようです。

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

上記のような感じで書く事で見えてない部分が見えるようになった時に、フェードインで表示されます。最初、このフェードインの設定が無かったら動いてるかどうか分かりませんでした。


意味は無いですが写真を貼っておきます

placeholder
代替画像ファイルのパスを指定します。いろいろな画像で共用で利用するのなら単色のGIFファイルくらいにしておくのがいいと思います。
threshold
画像読込み開始までのしきい値を設定します。書かないと 0 です。
effect
fadeIn と show の2つで、書かないと show のようです。この js を使ってるよ!って分かるように fadeIn にしています。
event
デフォルトはスクロールして画像が見えてきた時に動作するような scroll という指定になっていますが、click とか sporty という設定もあります。
failurelimit
同時読込み最大数の指定です。デフォルトでは 0 です。

効果を見るためのサンプル画像


コメント

山本一道

山本 一道

有限会社アップルップル

名古屋のホームページ制作会社「有限会社アップルップル」の代表をしています。弊社で開発しているCMS「a-blog cms」や、名古屋の「WCAN」という名古屋のWeb制作者のためのセミナーの主催や、コワーキングスペース「ベースキャンプ名古屋」も始めました。

エントリーリスト

カテゴリーリスト

タグクラウド

実践! コンテンツファーストのWebサイト運用  a-blog cmsではじめるCMSプロトタイピング

2016年6月30日に株式会社ボーンデジタル様より「実践! コンテンツファーストのWebサイト運用 a-blog cmsではじめるCMSプロトタイピング」が発売されました。