3

私は現在、ホバー機能で次のスクリプトを使用しています。

function UrlExists(url) {
    var http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();
    return http.status!=404;
}

すべての画像が次々に読み込まれるため、Webサイト全体の速度が低下します（またはクラッシュすることもあります）。

javascriptを使用して（完全に）画像をロードすることを防ぎますが、画像が存在するかどうかを確認する方法はありますか？

どうもありがとう！

4

4 に答える 4

3

JavaScript（したがってjQuery）はクライアント側であり、画像はロード前にサーバー側に存在するため、Ajaxまたはサーバー側のスクリプトを使用して画像が存在することを確認しない限り、画像が存在するかどうかを確認する方法はありません。

于 2012-12-18T16:20:46.263 に答える
1

画像を読み込まずに画像が存在するかどうかをjavascriptまたはjQueryを使用して判断する方法はありません。

回避策：

サーバー側に画像が存在するかどうかを確認する唯一の方法は、画像を非表示などに読み込んで、画像divが存在するかどうかを確認してから表示することです。

または、サーバー側の言語（php、asp、jsp、pythonなど）を使用して、イメージへのリクエストをサーバーサイド言語に送信し（できればAJAXを使用）、サーバーサイドスクリプトでイメージをチェックすることができます。存在するかどうかにかかわらず、存在する場合は画像を送り返し、存在しない場合はエラーコードを送信します。

于 2012-12-18T16:39:45.513 に答える
1

私の解決策：

function imageExists(url) {
    return new Promise((resolve, reject) => {
        const img = new Image(url);
        img.onerror = reject;
        img.onload = resolve;
        const timer = setInterval(() => {
            if (img.naturalWidth && img.naturalHeight) {
                img.src = ''; /* stop loading */
                clearInterval(timer);
                resolve();
            }
        }, 10);
        img.src = url;
    });
}

例：

imageExists(url)
    .then(() => console.log("Image exists."))
    .catch(() => console.log("Image not exists."));
于 2018-02-27T20:36:02.967 に答える
0

画像が存在するかどうかを確認する方法は次のとおりです。

  function checkImage(src) {
     var img = new Image();
     img.onload = function() {
     // code to set the src on success
  };
  img.onerror = function() {
// doesn't exist or error loading
 };

 img.src = src; // fires off loading of image
}

これが実用的な実装ですhttp://jsfiddle.net/jeeah/

于 2013-05-02T06:44:22.723 に答える