6

私は知っています、それはダウンロードが完了jQuery.load()したときに発生します。<img>

ブラウザが画像のダウンロードを開始したときに発生するイベントを知りたいのですが。通常、ブラウザは最初は画像のサイズを認識しており、画像のダウンロードにはしばらく時間がかかります（画像のサイズによって異なります）。

ブラウザが画像サイズを認識したらすぐに、またはブラウザが画像のダウンロードを開始したらすぐに、画像サイズを知るためのイベントを添付したいと思います。

[編集]

@ jfriend00からのアイデアありがとうございます、今setIntervalはサイズをチェックするために使用しています。しかし、画像のサイズではなく、一部のブラウザはダウンロードを完了する前に通知しません。そこで、コンテナのサイズを確認します。ブラウザで画像サイズがわかると、コンテナサイズが調整されます。ワラ、やった。

4

2 に答える 2

6

ブラウザは、画像のサイズを知っている（画像のダウンロードが完了する前に）可能な限り早い時間を通知する特別なイベントを提供しません。できることは、適切なロードハンドラーを設定して、イメージのダウンロードが完了し、そのサイズがわかるようにすることだけです。

一部のブラウザでは、画像全体が読み込まれる少し前に高さと幅を取得するためのブルートフォース攻撃の方法は、読み込み中の画像をポーリングしてとの存在を確認すること.widthです.height。ChromeのこのjsFiddleでは、onload()イベントが発生する前に利用できる場合があります。私は他のブラウザでこれをテストしていません。

オンロードハンドラーのルートをたどり、.src特定の画像タグがページのHTMLにある場合、ロードされたときに通知を受け取るようにする唯一の方法は、インライン画像ハンドラーを配置して、ハンドラーがからインストールされるようにすることです。非常に始まり：

<img src="xxx.jpg" onload="handleLoad(this)">

ページのJavaScriptからイベントハンドラーをアタッチしようとすると、遅すぎる可能性があります（画像の読み込みが完了した後）。ブラウザは中間イベント情報を提供しません（サイズはわかっているが、画像のダウンロードが完了していない場合など）。

動的に作成された画像オブジェクト（JavaScriptで作成した画像オブジェクト）の場合、オブジェクトを作成するときにloadイベントのリスナーをアタッチできます。

var img = new Image();
img.onload = function() {
    // the image is now loaded here and height and width are known
};
img.src = "xxxx.jpg";

注：動的に作成された画像オブジェクトでこれを行う場合は、値を設定する前にonloadハンドラーを設定する必要があり.srcます。.srcIEの一部のバージョンでは、画像がキャッシュされている場合、値が設定されるとすぐにloadイベントが発生するため、.src最初に設定してからハンドラーを設定すると、画像がブラウザーのキャッシュにある場合はイベントonloadを見逃します。onload

于 2012-08-20T21:50:23.243 に答える
-1

onStartLoadイベントは存在しません。恐れ入ります。すでに知っているように見える「load」イベントを使用する必要があります。

これを行うには、安全ではない安全な方法があります。

$(function() {
    $(imgNodeSelector).on('load', function(){
        //do stuff here
    });
});

一部のブラウザは、「onDomReady」イベントが発生する前にキャッシュされた画像をロードできるため、これは安全ではありません。この場合、ロードハンドラの配置が遅すぎます。つまり、「ボートに乗り遅れた」ことになります。したがって、次のことを行う方が安全です。

HTML：

<img class="delayedLoad" src="" data-src="path/to/images/myImg.jpg" />

javascript：

$(function() {
    $("img.delayedLoad").each(function() {
        $img = $(this);
        $img.on('load', function() {
            //do stuff here
        }).attr('src', $img.data('src'));
    });
});
于 2012-08-20T21:48:51.730 に答える