imagesLoadedを使って画像の読み込みタイミングを管理する

imagesLoadedを使って画像の読み込みタイミングを管理する

はやち

はやち

どうもですよ、はやちですよ:D<わあい
今回はですね、画像の読みこみの管理ができるimagesLoadedをご紹介します:D

導入方法

npmからはこちらからインストール
npm install imagesloaded
Bowerからはこちらからインストール
bower install imagesloaded –save

ファイルからのDLはこちらからも可能です。

基本的な使用方法

jQueryからも、Vanilla.jsからも使用することができます。

jQueryからの使用方法

$('#container').imagesLoaded( function() {
// 画像が読みこみ終わった時の処理
});

Vanilla.jsからの使用方法

imagesLoaded( document.querySelector('#container'), function( instance ) {
// 画像が読みこみ終わった時の処理
});

背景画像の対応方法

一緒に背景画像が読みこまれたときも検出することができます。

背景画像がいつロードされたか検出するには、{background:true}を設定します。

//jQuery
$('#container').imagesLoaded( { background: true }, function() {
// 画像が読みこみ終わった時の処理
});

//Vanilla.js
imagesLoaded( '#container', { background: true }, function() {
// 画像が読みこみ終わった時の処理
});

設定できるイベント

検出をするタイミングを、イベントで設定することができます。

always

すべての画像がロードされているか、または破壊されていることが確認できた時に発火。

// jQuery
$('#container').imagesLoaded().always( function( instance ) {
//すべての画像がロードされているか、または破壊されていることが確認できた時に発火。
});

done

すべての画像が正常に読みこみされた後に発火します。
こちらは途中でイメージが破壊されていたりということがなく正常に発火ができます。

// jQuery
$('#container').imagesLoaded().always( function( instance ) {
//すべての画像が正常に読みこみされた後に発火。
});

fail

すべての画像に少なくともひとつ壊れた画像がロードされた後に発火できます。
もしも壊れた画像があった際、このイベントで代わりの画像を生成させるなどの処理ができます。

// jQuery
$('#container').imagesLoaded().fail( function( instance ) {
//すべての画像に少なくともひとつ壊れた画像がロードされた後に発火できます。
});

progress

画像ひとつずつロード完了を検知することができます。
ローディングを実装する際にはこちらのイベントを使用するのがおぬぬめですね!

imgLoad.on( 'progress', function( instance, image ) {
//画像ひとつずつロード完了を検知。
});

まとめ

いかがでしたか? ローディングの実装にはかなり使いやすいのではないでしょうか。
今度の制作の際には使ってみようと思います……。

ローディング以外にグリッドレイアウトで有名なMasonry.jsを実装する際、画像サイズが検知されずズレる現象が起きるということをよく聞きます。
その際には、imagesLoadedで先に画像のローディングを検知して対策をするという方法で併用されているので、覚えておきたいものですな!

ではでは

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

はやち
はやち フロントエンドエンジニア / 林 佳代子

フロントエンドエンジニアのはやちです( ˘ω˘)☝ 以前までは顔隠しておりましたが思い切ることにしました…。 相変わらず顔文字乱舞ですがブログもコーディングも楽しくやっていこうと思います✌(´ʘ‿ʘ`)✌ 今までに作ったDemoたちはGithubにて公開しております!よろしければ是非( ˘ω˘)☞三☞シュッシュッ

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL