大きな画像や画質の高い画像は読み込みに若干時間がかかります。
読み込み中にJSが発火してしまうと、画面がガタついたり、予期せぬ動きをしてしまったりします。
単純に画像の読み込みを待ってからJSを発火させるという回避策を紹介します。
以下はページ表示時に画像の読み込みを開始し、終わると画像を表示するボタンを表示します。
画像を3つ読み込み完了！
一挙に表示
画像はCSSで「display:none;」にしておく必要があります。
jQueryのサンプルコードはこちら
$(function() {
for (var i = 0; i < $('img.loaded').length; i++) {
$('img').eq(i).load(function() {
$('#img_info').html('画像を'+i+'つ読み込み完了！');
$('#img_info').css('background-color','blue');
$('.demo_btn').fadeIn();
});
};
$('.demo_btn').on('click', function(e) {
$('.loaded').fadeIn();
});
});裏側で画像が読み込まれたかどうかは、コンソールで確認できます。
