【３】画像をフェードインで読み込ませる｜jQueryを読解する

画像がふわっとおしゃれに登場するサイトを良く見かけます。
今日はそんなことを実現するjQueryのスクリプトを読解してみます。

Webクリエイターボックスより引用

$(function () {
     $('.imgBox img').hide();
});
 
var i = 0;
var int=0;
$(window).bind("load", function() {
     var int = setInterval("doThis(i)",500);
});
 
function doThis() {
     var images = $('img').length;
     if (i >= images) {
          clearInterval(int);
    }
    $('img:hidden').eq(0).fadeIn(500);
    i++;
}

$('.imgBox img').hide();

.imgBoxとは、予めHTML側に設定したクラス属性です。
jQueryを使って、.imgBoxクラスがつけられたタグ内の、<img>タグに、hide()という仕事を付与しています。

jQuery日本語リファレンスより引用

つまり、.imgBoxクラスがつけられたタグ内のimg(画像)を非表示にしているのです。

var i = 0; var int=0;

共に初期値を0として、iとintという変数を生成しています。

$(window).bind("load", function() { });

ここでは、windowオブジェクトが登場します。
ここでは、windowオブジェクトに.bind("load" ,function(){ △△ });という仕事を付与することでページコンテンツが全てロードされたら△△という仕事を作動するということが書かれています。

var int = setInterval("doThis(i)",500);

ページコンテンツが全てロードされたら作動させる仕事内容です。
setInterval(○○,△△);とは、△△ミリ秒間隔ごとに○○という仕事を実行するという意味で、
ここでは、0.5秒でdoThis(i)という仕事を実行するということが書かれています。

doThis(i)という仕事については、下記の部分に書かれています。

function doThis() {
     var images = $('img').length;
     if (i >= images) {
          clearInterval(int);
    }
    $('img:hidden').eq(0).fadeIn(500);
    i++;
}

var images = $('img').length;

imagesという名前の変数を生成しています。.lengthは以前も出てきましたが、いわゆる...の数を格納させたい時に使うメソッドです。<img>タグの数(=画像の枚数)をimagesという変数に格納しています。

if (i >= images) {
clearInterval(int);
}

ざっくり説明すると、すべての画像のロードが完了したら var int = setInterval("doThis(i)",500);で設定したintの変数に組まれた仕事を停止するということが書かれています。
ここは、もう少し上手く説明できるように僕も理解度を深めなくてはいけませんね。。。

$('img:hidden').eq(0).fadeIn(500);

img:hiddenとは、隠されている（非表示状態の）<img>タグを指します。
.eqとは、抽出をするための記述で、.fadeIn(500)をつけることで、
非表示の画像を抽出し、0.5秒のスピードで表示させることを実現しています。

i++;

そして、最後に、画像を上から(プログラム的な意味で)順番にふわっと表示させるためにi変数の値を処理が終わるごとに増やしていきます。


まだまだ、理解度が低いために常にリファレンスなどに立ち返りながらの読解になってしまいました。。。