Staff Blog
スタッフブログ

  • Twitterでシェア
  • このエントリーをはてなブックマークに追加
  • Google+でシェア
  • follow us in feedly

画像が読み終えたら実行が簡単に実現できる「imagesLoaded」

imagesloadedJavascriptってとっても便利です。
たくさんのフレームワークもありどんどん便利になっているし、実現できることが増えてきております。
でも、すごく便利ですが落とし穴があります。
その落とし穴は、読み込み順序です。
読み込みの順序によっては、動かないということは、JavaScriptを構築している方だったら、経験済みではないでしょうか?
それは、JavaScriptの実行の順番でもあり、HTMLや画像の読み込みにも影響がでてきます。
JavaScriptの順序であれば、コードの修正でおわりますが、HTMLや画像の読み込みが完了後にJavaScriptを実行するとなれば、いろいろと細工が必要になってきます。
そんな時に便利なのがこの「imagesLoaded」です。
この流れと名前を見ていただければどういったものかは、わかると思います。
その通りです。画像が読み込まれたら実行する!が実現できるのです。
あ、タイトルにすでにネタバレしてましたね。

準備

公式サイトより必要なファイルをダウンロードし、読み込みます。

<script src="Path/to/imagesloaded.pkgd.min.js"></script>
<!-- or -->
<script src="Path/to/imagesloaded.pkgd.js"></script>

CDN

CDNもあるようです。
CDNの場合は下記のどちらかを記述するだけです。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script>
<!-- or -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.js"></script>

使い方

使い方はすごく簡単で、下記のどちらかをつかうだけです。

// Vanilla JS
imagesLoaded('#container', function(){
 //実行させたい処理
});
// jQuery
$('#container').imagesLoaded(function(){
 //実行させたい処理
});

シンプルに画像読み込み後に処理をするというだけならば、上記の形で大丈夫です。
イベントで使うこともできたりしますが、特にそういった使い方をすることは経験上少ないかなと思います。

あとは、背景の時は少し書き方が違います。

// jQuery
$('#container').imagesLoaded( { background: true }, function() {
 console.log('#container background image loaded');
});
// vanilla JS
imagesLoaded( '#container', { background: true }, function() {
 console.log('#container background image loaded');
});

上記のように “`{ background: true }“` を設定するだけです。
これも簡単ですね。

// jQuery
$('#container').imagesLoaded( { background: '.item' }, function() {
 console.log('all .item background images loaded');
});
// vanilla JS
imagesLoaded( '#container', { background: '.item' }, function() {
 console.log('all .item background images loaded');
});

あとはセレクタでも指定できます。

jQueryで.load()がありますが、動きが安定しないので、使わないです。imagesLoadedを使うほうがいいと思います。

画像を扱うJavaScriptはたくさんあります。
いや、画像を扱わないことのほうが少ないかもしれませんね。
グリッドレイアウトでの高さを揃える等の処理には最適かもしれません。

Browser support

サポートブラウザは下記になります。

  • IE8+
  • Android 2.3+
  • iOS Safari 4+
  • All other modern browsers

これがサポートされていれば、ほぼ大体問題ないと思います。

それでは、楽しい、JavaScriptライフを!

関連記事

5月25日のGoogle大変動、いったい何が起こったのか?... 5月23日から25日にかけてGoogleの検索順位変動率を示すグラフが大幅に上がっていますね。 何やら大きなアルゴリズムの改定があったもよう。 多分、検索キーワードとの関連性に関するものだと思われる。 Google変動後、弊社のサイトの状況はというと その...
SEOの戦い方がガラリと変わりそうな気配。... 先日、お客様のWEBサイトにて書かせていただいた記事が検索順位で2位まで来ました。 月間検索ボリューム20,000件ほどのキーワードで2位。 結果として満足ゾーンです。     この記事の月間PV数は4000PV~5000PVなので、かなりPVを稼げていると思います。...
弊社で制作した「税理士法人CROSSROAD」様のコーポレートサイトが書籍に掲載されました。... 先日、参考資料として会社で購入した書籍に弊社で制作した「税理士法人CROSSROAD」様のコーポレートサイトが掲載されておりました。 掲載されているとは知らずに購入したので発見したときはびっくり! こうやって取り上げていただけることは大変ありがたく嬉しいことで、第一発見者の私は思わず「載って...
私がブログを書く理由。WEBマーケティングのプロとして研究をしているから... 私がブログを書く理由は多々ありますが、その一つがWEBマーケティングのプロとして生計をたてているというもの。 WEBマーケティングの研究として色々な実験を行う場と考えております。 そんな実験の場って読者の皆さまに失礼だろって? 誤解の無いよう、また早合点無きよう説明させていただきますと。 真...
ホームページのアクセス数を上げたいのならブログを書くべし!ただし書きゃ良いってもんじゃない。... ホームページへの集客アップの相談は今も昔も変わりなく、「検索エンジンで上位に表示されるには?」とか「もっとホームページで集客したいんです。」って相談は後を経ちません。 そのご要望は何年も前と変わりはありませんが。 ですがその方法は年々変わっています。 とにかく情報を積極的に更新して配信...
WEBデザイン制作の時に役立つWEBサイトをご紹介... 今回は、デザイン制作時にそういえば毎回このサイト見ているなと思うサイトがいくつかあったので、そのサイトのうちの一部をご紹介します。 デザインの参考を探す まずはどんなデザインにするか決めるために、いろいろなアーカイブサイトからイメージに合うデザインを探します。 正直ブックマークしているサイト...
ブレイクポイントについて改めて考えてみた... .blogliststyle{ margin-left: 1em; } .blogliststyle li{ font-size: 17px; margin-left: 1.3em; margin-bottom: 10px; text-indent: -1.3em; } ...
ストックフォトサービス各社のカンプ画像のサイズを比較してみた... web制作の現場で欠かせないストックフォト。 カンプ用といえども、先方にイメージをより良く伝えるために同じ画像であればできるだけ大きなサイズの画像が使いたいと思うものです。 そこで今回は会員登録なしで使用できるカンプデータのサイズを、自分がよく使う幾つかのサイトの一般的なアスペクト比3:...

この記事を共有する

髭人
投稿者:髭人
2016年03月01日火曜日 | 23:38
WEB制作業界に新しい風に!台風になりたい!

この人が書いたその他のブログ記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  • I.M.Dコーポレートサイト
お問い合わせ