jQueryのプラグインでlazyloadという画像を後から読み込ませるプラグインもありますが、それを使わないで自作します。
- いろんなオプションは必要ない
- 細かい仕様を理解しないとたまにハマる（必要でない画像を非表示にしてしまったり）
- プラグインなのでバージョンをチェックしないといけない
ということで、jQueryのみで書いたブラウザの表示するタイミングで読み込むサンプルがこちら。
// 変数名いろいろ
var posi_top,wih_half,current_view;
// 画面の上から90%にそのdivが通過したら
var start_position = 0.9;
$(document).ready(function(){
// 描画のとき
var wih = window.innerHeight;
var wih_half = wih * start_position;
current_view = wih_half;
// 表示する通過位置を算出
demo_set_posi();
});
$(window).resize(function() {
// リサイズの時
var wih = window.innerHeight;
var wih_half = wih * start_position;
current_view = wih_half;
// 表示する通過位置を算出
demo_set_posi();
});
$(window).scroll(function(){
// スクロールの時
var wih = window.innerHeight;
var wih_half = wih * start_position;
current_view = $(this).scrollTop() + wih_half;
// 表示する通過位置にスクロール分を足す
demo_set_posi();
});
function demo_set_posi(){
$('img.demo_lazy').each(function() {
// 特定のクラスがついたアイテムの位置
var posi = $(this).offset();
posi_top = posi.top;
if(current_view > posi_top){
// 表示位置を超えたら、srcに代入し呼び出す。
if($(this).attr("src") === undefined){
i = $(this).attr("data-original");
$(this).hide();
$(this).attr("src",i);
// 一度隠しておいて、画像を読み込んだらフェードイン！
$(this).load(function() {
$(this).fadeIn();
});
}
}
});
}HTMLはこれだけ
<img class="demo_lazy" data-original="/img/demo/cat/001.jpg" src="">src=を指定せず、data-original=にイメージパスを仮置きしておくのは、lazyloadと同じです。
