どうもですよ、はやちですよ: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サイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
