javascript - $.ajax.load() は、画像が読み込まれる前にコールバックをトリガーします

Question

load()すべての画像が完全に読み込まれる前にajax がコールバックをトリガーするのはなぜですか?

$(element).load("url #id", function()
{
    $(this).fadeIn();
})

データを読み込むと、elementフェードインし、画面に画像がゆっくりと表示されるのがわかります...画像は読み込まれますが、コンピューターが遅いのですか?

完全に読み込まれた後にコンテンツを表示するにはどうすればよいですか?

Answer 1

$(element).loadはコンテンツを にロードしますelementが、その後、すべての画像を見つけてロード コールバックをアタッチし、すべての画像がいつロードされたかを判断できます。loadただし、さまざまな理由で画像のイベントが発生しない可能性があるため、これはあまり信頼できません。一部のブラウザーではload、画像がキャッシュされるとイベントが同期されるため、画像にイベント ハンドラーをアタッチする前にイベントが発生します。そのため、5 秒経っても画像が読み込まれない場合は、elementとにかく表示します。

$(element).load("url #id", function () {
    var $self = $(this),
        $images = $self.find('img'),
        imgCount = $images.length,
        loadedCount = 0;

    $images.on('load', function () {
        if (++loadedCount === imgCount) {
            $self.fadeIn();
            $(this).off('load');
        }
    });

    setTimeout(function () {
        if (loadedCount !== imgCount) {
            $self.fadeIn();
            $images.off('load');
        }
    }, 5000);
});