77

画像パスを含むいくつかの情報を返すAjax呼び出しを行っています。

このすべての情報をHTMLで準備し、一種のポップアップとして表示します。ポップアップdivによる表示を非表示から表示に切り替えるだけです。

ポップアップdivの位置を設定するには、画像の高さに応じて計算する必要があります。そのため、位置を設定して可視性を表示に切り替える前に、画像が読み込まれてその寸法がわかるのを待つ必要があります。

再帰、setTimeout、完全なimgプロパティ、whileループを使ってトリックを試しましたが、成功しませんでした。

だから、どうすればこれを行うことができますか？たぶん、Ajax呼び出しでディメンションを返す必要があります。

4

7 に答える 7

143 
var img = new Image();
img.onload = function() { alert("Height: " + this.height); }
img.src = "http://path/to/image.jpg";

上記の順序で行うことが重要であることに注意してください。最初にハンドラーをアタッチしてから、を設定しsrcます。逆の場合、画像がキャッシュにあると、イベントを見逃す可能性があります。JavaScriptはブラウザーのシングルスレッドで実行されますが（Webワーカーを使用している場合を除く）、ブラウザーはシングルスレッドではありません。ブラウザがを確認しsrc、利用可能なリソースを識別し、ロードし、イベントをトリガーし、要素を調べて、コールバックのためにキューに入れる必要のあるハンドラーがあるかどうかを確認し、何も表示せず、イベントを完了することは完全に有効です。処理、すべての間src行とハンドラーを接続する行。（コールバックは、登録されている場合は行間で発生せず、キューで待機しますが、コールバックがない場合は、イベントを待機する必要はありません。）

于 2010-02-26T14:18:42.430 に答える
12

If you use jQuery, you can use its load event.

Have a look at the example:

$('img.userIcon').load(function(){
    if($(this).height() > 100) {
        $(this).addClass('bigImg');
    }
});
于 2010-02-26T14:16:51.373 に答える
5

受け入れられた答えは時代遅れですが、基本的なImage#onloadコールバックアプローチを示しています。最近では、コールバックの地獄を回避するために、画像の読み込みを約束することをお勧めします。

この回答は、画像オンロードハンドラーを約束するのに適していますが、私のコメントが示すように、いくつかの重要なポイントが欠落しています。

Imageこれはもう少し一般的な約束です。関数を最小限に再利用できるようにするには、ハンドラーで拒否しonerror、実際の画像オブジェクトをリゾルバーに渡すことが重要です。

改善には、追加のパラメーター（たとえばcrossOrigin、など）が含まれる場合があります。settingsオブジェクトまたはImageパラメーターとしてのを提供することは、関数を一般化するための別のアプローチです（設定するsrcと要求が発生するため、ハンドラーが追加された後も最後に実行されます）。

const loadImage = src =>
  new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = src;
  })  
;

loadImage("http://placekitten.com/90/100").then(image => 
  console.log(image, `\nloaded? ${image.complete}`)
);

上記の機能をPromise.all使用すると、画像のバッチを並列にロードするために使用できます（Promise.allSettled一部の画像がロードされない場合でも続行したい場合に便利です）。

const loadImage = src =>
  new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = src;
  })  
;

const imageUrls = [
  "http://placekitten.com/85/150",
  "http://placekitten.com/85/130",
  "http://placekitten.com/85/110",
];
Promise.all(imageUrls.map(loadImage)).then(images => {
  const canvas = document.createElement("canvas");
  document.body.appendChild(canvas);
  const ctx = canvas.getContext("2d");
  images.forEach((image, i) =>
    ctx.drawImage(image, i * 90, 0, image.width, image.height)
  );
});

于 2021-02-13T00:20:36.887 に答える
3

画像のonloadをpromiseを使用して関数にラップし、awaitを使用して呼び出します。

async drawImg(ctx, image){

    return new Promise(resolve => {

          image.onload = function () {
                ctx.drawImage(image, 10, 10, 200, 180);
                resolve('resolved');
             }

    });

  }

それはうまくいくはずです

于 2020-03-02T13:44:55.327 に答える
2

ウィンドウロードイベントはどうですか？

window.addEventListener('load', (event) => {
  //do stuff with images
});

また

window.onload = (event) => {
  //do stuff with images
};

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

これは、レイアウトスクリプトを実行する前に、ブラウザで画像のサイズを計算する必要がある場合に役立ちました。

于 2021-03-30T01:12:25.630 に答える
0

画像の読み込みを待つという約束の例：

function waitForImage(imgElem) {
    return new Promise(res => {
        if (imgElem.complete) {
            return res();
        }
        imgElem.onload = () => res();
        imgElem.onerror = () => res();
    });
}



// test
(async () => {
  const img = document.querySelector('img');
  // to not to cache, set src dynamically
  img.src = 'https://www.gravatar.com/avatar/71094909be9f40bd576b1974a74966aa?s=48&d=identicon&r=PG&f=1';

  console.log('height before', img.naturalHeight); // 0
  await waitForImage(img);
  console.log('height after', img.naturalHeight); // 48
})();
<img src=""/>

于 2021-10-07T18:46:11.537 に答える
-2

ページにCAPTCHA（1st_image）画像の読み込みが遅く、CAPTCHA画像（1st_image）が読み込まれた後でのみ別の画像（2nd_image）を表示したかったのです。そのため、CAPTCHA（1st_image）画像が最初に読み込まれるのを待つ必要がありました。

これは、画像が最初に読み込まれるのを待ってから別の画像を読み込むのに完全にうまく機能するソリューションです（他の画像が読み込まれるのを待っている間、「お待ちください！」の画像を表示することを忘れないでください）。

<script>
    function checkImageLoad() {
        if (document.getElementById("1st_image").complete == true) {
            console.log("1st_image Loaded!");
        }
        document.getElementById("2nd_image").src = "http://example.org/2nd_image.png";
    }
</script>
<body onload="checkImageLoad();">
<img id="1st_image" src="http://example.org/1st_image.png">
<img id="2nd_image" src="http://example.org/loading_please_wait.gif">

インターネットの速度が遅いか速いか、ブラウザはページ全体にすべての画像が読み込まれるのを待ってから機能を実行するため、最初の画像が読み込まれた後にのみ2番目の画像が表示されます大丈夫。

高度な注意：画像の「src」にあるWebページのURLを使用して、最初にWebページをロードしてから、画像を表示できます。目的は、表示される2番目の画像（CAPTCHAなど）に影響を与える可能性のある外部WebページからCookieをロードすることです。

于 2016-05-01T12:15:13.500 に答える