3

それは完全にばかげた質問です。しかし、私は自分の疑問を解消したかっただけです。onload画像が読み込まれているときに、またはoncompleteイベントを使用して読み込み状態を確認できます。しかし、JavaScriptを使用して画像のどの部分が読み込まれるかを知りたかっただけです。それは本当に可能ですか？

私の質問は、URLから画像サイズを取得できますか？ある間隔で画像のどのくらいの部分が読み込まれるかを取得できますか？

4

2 に答える 2

5

XMLHttpRequestオブジェクトを介して画像をロードする場合は、イベントにバインドしてprogress、関数の引数「event」のプロパティ「loaded」と「total」を確認できます。いつものように、さまざまなブラウザ間のサポートは驚くかもしれません。

リンクされたMDNの記事から：

var req = new XMLHttpRequest();
req.addEventListener("progress", onProgress, false);
req.open();

function onProgress(ev) {
  if (evt.lengthComputable) {
    var percentComplete = evt.loaded / evt.total;
    // ...
  } else {
    // Unable to compute progress information since the total size is unknown.
  }
}

[更新]コメント投稿者@Bergiの質問によると、完全にダウンロードされた後で画像をDOMに追加する場合は、次のコマンドを使用して新しい画像要素を追加できます。

  1. 「src」属性は、XHRを介してフェッチしたURLと同じです（ブラウザーのキャッシュが冗長なダウンロードを防ぐことを期待しています）。

  2. または、「src」属性をBase64でエンコードされた画像コンテンツのデータURIに設定し、ブラウザのキャッシュについて心配する必要はありません。

var img = new Image(); // or document.createElement('img');
img.src = ... // URL from the above XHR request, or
img.src = 'data:image/png;base64,' + base64(xhrContent);
document.body.appendChild(img);
于 2012-12-17T18:40:46.263 に答える
1

これは、ファイル名、ファイルサイズ、mimetype、およびファイルハンドルへの参照を読み取ることができる最新のブラウザー用のhtml5ファイルAPIを使用して実現できます-この例を確認してください

于 2012-12-17T18:44:18.103 に答える