画像を沢山読み込んでいると、表示までに時間がかかったり、読み込みながらページが形成されて、ガタガタと忙しなく動いて表示されることがよくあります。
そんな時は、「イメージをロードしてから処理」をjQueryで実現する。
// 画像のプリロード var $img = $('<img>'); $img.attr('src', '画像のURL'); $img.on('load', function() { //完了後の処理 });
これが基本の書き方のようです。
外部JSONファイルなどに写真のリストがあって、そこから写真のデータを表示させるには、
$.getJSON('JSONのURL', function(data) { var outputHTML = '', len = data.length, loadedImgs = 0; /* Json Data ========== */ for (var i in data) { var $img = $('<img>'); $img.attr('src', data[i].image); $img.on('load', function() { loadedImgs++; checkImageLoaded(); }); // HTML生成 outputHTML += '<li>' + $img + '</li>\n'; } /* ロードした画像の数をチェック ========== */ function checkImageLoaded() { if (loadedImgs >= len) { // 生成したHTMLを指定の場所に追加 $('ul#imageList').html(outputHTML); } } });
という感じ。かなりアナログ的ですが・・・。
underscore.jsやlodash.jsなんかを使うともっとシンプルに書けるのかな?