何かを実行する前にすべての画像が読み込まれるのをjQueryに待機させる正式な方法

641

これを行うとjQueryで：

$(function() {
   alert("DOM is loaded, but images not necessarily all loaded");
});

DOMがコードをロードして実行するのを待ちます。すべての画像が読み込まれていない場合でも、コードは実行されます。これは明らかに、要素の表示や非表示、イベントのアタッチなどのDOMを初期化する場合に必要なことです。

アニメーションが必要で、すべての画像が読み込まれるまで実行したくないとしましょう。これを行うにはjQueryに公式の方法がありますか？

私が持っている最善の方法はを使用すること<body onload="finished()">ですが、私は必要がない限り、本当にそれをしたくありません。

注：Internet ExplorerのjQuery 1.3.1にはバグがあり、実際にすべての画像が読み込まれるまで待機してから、内部でコードを実行します$function() { }。したがって、そのプラットフォームを使用している場合は、上記の正しい動作の代わりに、私が探している動作が得られます。

jquery 
— Simon_Weaver
ソース
3
動作しません$("img").load()か？
— ルーカス
1
ディメンション属性を設定した場合、それらのディメンションに依存するレディ関数でコードを安全に実行できることに言及する価値があると思います。phpを使用すると、アップロード時にphp.net/manual/en/function.getimagesize.phpを使用してそれらを取得し、dbに保存するか、ブラウザーに出力する前に保存できます。
— Alqin
あなたは信じられないほどの仕事をして何かをしたい場合は、非常に良い＆人気imagesloadedのJavaScriptライブラリは、以下のこの回答に記載されたチェックアウトstackoverflow.com/a/26458347/759452
— エイドリアンはして
「ここで私は公式の方法以外のものを見つけるようになりました。」
— レオンペルティエ2015

回答:

1035

jQueryを使用する$(document).ready()と、DOMが読み込まれた$(window).on("load", handler)ときに何かを実行したり、画像など他のすべてのものも読み込まれたときに何かを実行したりできます。

jollyrogerJPEGファイル（またはその他の適切なファイル）がある場合、次の完全なHTMLファイルで違いがわかります。

<html>
    <head>
        <script src="jquery-1.7.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                alert ("done");
            });
        </script>
    </head><body>
        Hello
        <img src="jollyroger00.jpg">
        <img src="jollyroger01.jpg">
        // : 100 copies of this
        <img src="jollyroger99.jpg">
    </body>
</html>

これで、画像が読み込まれる前に警告ボックスが表示されます。これは、その時点でDOMが準備されているためです。次に変更した場合：

$(document).ready(function() {

に：

$(window).on("load", function() {

その後、警告ボックスがするまで表示されません後にイメージがロードされます。

したがって、ページ全体の準備ができるまで待機するには、次のようなものを使用できます。

$(window).on("load", function() {
    // weave your magic here.
});
— パクスディアブロ
ソース
32
額 +1を軽くたたいて、それを完全に忘れました。$（window）.load（）は、イメージが完了するまで起動しません。
— Paolo Bergantino、
10
私は同じことをしました。それでも、それが私であることを知らず、まだ理解していない答えを読み通してください。
— Rimian
24
ただ注意-これはChromiumでは動作しないようです（私はChromeを想定しています）。$（window）.readyイベントは$（document）.readyと同じように起動するようです-画像が完了する前。
— Nathan Crause、2012年
24
$（window）.load（function（））
— TJ-
3
@KyorCode IEの画像がキャッシュされたからというだけではありませんか？その場合、「ロード」イベントはまったく発生しません。この記事は、この問題を回避するのに役立ちます。
— Jamie Barker
157

要素に画像が読み込まれたときにコールバックを起動したり、読み込まれた画像ごとに1回起動したりできるプラグインを作成しました。

$(window).load(function() { .. })チェックするセレクタを定義できることを除いて、に似ています。すべての画像がいつ入ったかを知りたいだけの場合#content（たとえば）のが読み込まは、これがプラグインです。

また、CSSで参照されている画像の読み込みもサポートしていますbackground-image。list-style-imageなど

waitForImages jQueryプラグイン

使用例

$('selector').waitForImages(function() {
    alert('All images are loaded.');
});

jsFiddleの例。

その他のドキュメントは、GitHubページで入手できます。

— アレックス
ソース
1
ありがとうございました！！$ .load（）は私にとってはうまくいきませんでしたが、これは完全にうまくいきます。
— Fraxtil 2011
私はChromeバージョン22.0.1229.94とこのプラグインを使用しており、waitFormImages：内の読み込まれた画像からオフセットを読み取ろうとしました('img selector').each(function(index) { var offset = $(this).offset(); ...});が、offset.topはまだゼロです。どうして？
— basZero
1
@basZeroこれ以上のコンテキストがないとわかりにくい。問題ページで問題を提起してください。
— アレックス、2011年
画像がchacedされているとき、それは私のために機能しません。any1はこれの回避策を持っていますか？
— Mandeep Jain 2013
2
基本的にはimagesLoadedに類似していますが、srcsetsでも動作します。まさに私が探していたもの！素晴らしいプラグイン！
— FabianSchöner2016
48

$(window).load()ページが初めて読み込まれたときにのみ機能します。動的な処理を行っている場合（例：ボタンをクリックし、新しい画像が読み込まれるのを待つ）、これは機能しません。それを達成するには、私のプラグインを使用できます：

デモ

ダウンロード

/**
 *  Plugin which is applied on a list of img objects and calls
 *  the specified callback function, only when all of them are loaded (or errored).
 *  @author:  H. Yankov (hristo.yankov at gmail dot com)
 *  @version: 1.0.0 (Feb/22/2010)
 *  http://yankov.us
 */

(function($) {
$.fn.batchImageLoad = function(options) {
    var images = $(this);
    var originalTotalImagesCount = images.size();
    var totalImagesCount = originalTotalImagesCount;
    var elementsLoaded = 0;

    // Init
    $.fn.batchImageLoad.defaults = {
        loadingCompleteCallback: null, 
        imageLoadedCallback: null
    }
    var opts = $.extend({}, $.fn.batchImageLoad.defaults, options);

    // Start
    images.each(function() {
        // The image has already been loaded (cached)
        if ($(this)[0].complete) {
            totalImagesCount--;
            if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);
        // The image is loading, so attach the listener
        } else {
            $(this).load(function() {
                elementsLoaded++;

                if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);

                // An image has been loaded
                if (elementsLoaded >= totalImagesCount)
                    if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
            });
            $(this).error(function() {
                elementsLoaded++;

                if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);

                // The image has errored
                if (elementsLoaded >= totalImagesCount)
                    if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
            });
        }
    });

    // There are no unloaded images
    if (totalImagesCount <= 0)
        if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
};
})(jQuery);
— Roko C. Buljan
ソース
誰かがBatchImagesLoadプラグインの使用例を必要とする場合に備えて：yankov.us/batchImageLoad
— Jonathan Marzullo 2013
1
失礼ではありませんが、プラグインの信頼性に関してあなたの言葉に「ただ」頼ることはできません。Yevgeniy Afanasyevの回答で述べたように、imagesLoadedはこの点ではるかに優れた機能を果たし、他の多くのコーナーケースと一緒にあなたが言及したユースケースをカバーします（解決されたgithubの問題を参照）。
— Adrien Be
19

$(window).load起動後にリクエストされた単一の画像のダウンロード完了を通知したい場合は、画像要素のloadイベントを使用できます。

例えば：

// create a dialog box with an embedded image
var $dialog = $("<div><img src='" + img_url + "' /></div>");

// get the image element (as a jQuery object)
var $imgElement = $dialog.find("img");

// wait for the image to load 
$imgElement.load(function() {
    alert("The image has loaded; width: " + $imgElement.width() + "px");
});
— ダン・パッサロ
ソース
13

これまでの答えのどれも、最も単純なソリューションであると思われるものを与えていません。

$('#image_id').load(
  function () {
    //code here
});
— コズ
ソース
これの良いところは、画像が読み込まれるとすぐに、個々の画像に対してトリガーできることです。
— トップキャット
6

imagesLoaded.jsJavaScriptライブラリの使用をお勧めします。

jQueryを使用しないのはなぜ$(window).load()ですか？

/programming/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load/26929951に怒りを込めて

それは範囲の問題です。imagesLoadedを使用すると、一連の画像をターゲットにできますが、$(window).load()すべてのアセット（すべての画像、オブジェクト、.jsおよび.cssファイル、さらにはiframeを含む）をターゲットにできます。ほとんどの場合、imagesLoadedは、対象となる$(window).load()アセットのセットが少ないため、トリガーされるよりも早くトリガーされます。

イメージロードを使用するその他の正当な理由

  • IE8 +によって公式にサポートされています
  • ライセンス：MITライセンス
  • 依存関係：なし
  • 重量（縮小＆gzip圧縮）：7kb縮小（軽量！）
  • ダウンロードビルダー（体重を減らすのに役立ちます）：不要、すでに小さい
  • Github：はい
  • コミュニティと貢献者：かなり大きなメンバー、4000人以上のメンバー、ただしわずか13人の貢献者
  • 歴史と貢献：比較的古い（2010年以降）として安定しているが、まだアクティブなプロジェクト

資源

— エイドリアン・ビー
ソース
4

jQueryを使用すると、これが付属しています...

$(function() {
    var $img = $('img'),
        totalImg = $img.length;

    var waitImgDone = function() {
        totalImg--;
        if (!totalImg) alert("Images loaded!");
    };

    $('img').each(function() {
        $(this)
            .load(waitImgDone)
            .error(waitImgDone);
    });
});

デモ：http : //jsfiddle.net/molokoloco/NWjDb/

— モロコロコ
ソース
ブラウザが画像に対して304 Not Mofified応答を返し、画像がキャッシュされていることを意味する場合、これは適切に機能しないことがわかりました。
— JohnyFree
1

imagesLoaded PACKAGED v3.1.8（最小化すると6.8 Kb）を使用します。それは比較的古い（2010年以降）がまだアクティブなプロジェクトです。

あなたはそれをgithubで見つけることができます：https： //github.com/desandro/imagesloaded

彼らの公式サイト：http : //imagesloaded.desandro.com/

使用するよりも優れている理由： 

$(window).load()

次のように画像を動的にロードしたい場合があるため：jsfiddle

$('#button').click(function(){
    $('#image').attr('src', '...');
});
— エフゲニー・アファナシエフ
ソース
1
実際、imagesloadedはブラウザ間のsrc属性値の変更をサポートしていません。毎回新しい画像要素を作成する必要があります。Firefoxで試してみてください。問題が表示されます。
— Adrien Be
良い点、私はまだグーグルクロムとIE-11でテストしただけです。それは働いていました。ありがとう。
— Yevgeniy Afanasyev 2014年
私は、「あなたがimagesloadedを行うことができない何か」のGitHub上imagesLoaded関連する問題を参照ポイントでの私の質問のstackoverflow.com/q/26927575にこのクロスブラウザの問題を追加しましたgithub.com/desandro/imagesloaded/issues/121を
— エイドリアンして
1

このようにして、本文または他のコンテナ（選択に依存する）内のすべての画像が読み込まれたときにアクションを実行できます。PURE JQUERY、プラグインは必要ありません。

var counter = 0;
var size = $('img').length;

$("img").load(function() { // many or just one image(w) inside body or any other container
    counter += 1;
    counter === size && $('body').css('background-color', '#fffaaa'); // any action
}).each(function() {
  this.complete && $(this).load();        
});
— マリオメドラノ
ソース
0

私の解決策はmolokolocoに似ています。jQuery関数として記述：

$.fn.waitForImages = function (callback) {
    var $img = $('img', this),
        totalImg = $img.length;

    var waitImgLoad = function () {
        totalImg--;
        if (!totalImg) {
            callback();
        }
    };

    $img.each(function () {
        if (this.complete) { 
            waitImgLoad();
        }
    })

    $img.load(waitImgLoad)
        .error(waitImgLoad);
};

例：

<div>
    <img src="img1.png"/>
    <img src="img2.png"/>
</div>
<script>
    $('div').waitForImages(function () {
        console.log('img loaded');
    });
</script>
— マリウス・チャルチュク
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.