0

たくさんの画像をロードするページがあります。

一部のリンクは存在しない画像へのリンクであり、ブラウザはこれらの画像を取得しようとすると 404 をスローします。

問題の例を次に示します。

<div>01<img id="01" src="http://i.imgur.com/ydiBX0Bb.jpg" /></div><hr />
<div>02<img id="02" src="http://i.imgur.com/aObMmrWb.jpg" /></div><hr />
<div>03<img id="03" src="http://www.google.com/does_not_exist.jpg" /></div><hr />
<div>04<img id="04" src="http://www.google.com/also_does_not_exist.jpg" /></div><hr />
<div>05<img id="05" src="http://i.imgur.com/kJezbugb.jpg" /></div><hr />

そしてフィドル：

http://jsfiddle.net/amv3z/

画像 1、2、および 5 はすべて正常に読み込まれます。画像3と4は存在しません。

そのため、私の開発コンソールは次のエラーを吐き出します。

GET http://www.google.com/does_not_exist.jpg 404 (Not Found)
GET http://www.google.com/also_does_not_exist.jpg 404 (Not Found)

JavaScript / jQuery を使用して、404 エラーをスローした画像リンクのリストを取得できますか?

ありがとう！

4

1 に答える 1

0

あなたが求めているものは、すでにスタックオーバーフローにあるようです。

元の質問を表示するには、ここをクリックしてください。

基本的に、コードのスライスのいずれかを for ループに入れる必要があります。これを行うには、画像ソースの配列が必要になります。

リンク内のプレーンな JS 関数:

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

リンクに記載されている関数を使用した例：

var aImageSrc = ['path/to/img/1', 'path/to/non/existant/img/2', 'path/to/other/img'];
var aErrorSrc = []; //Will be filled with non-existant images.
var imgStr = '';

for (var i = 0; i < (aImageSrc.length-1); i++) {
    if (!resourceExists(aImageSrc[i])) {
        aErrorSrc.push(aImageSrc[i]);
    } else {
        //Append image to string if it exists.
        imgStr += '<image src="'+aImageSrc[i]+'" alt="Don't forget the people with lesser visibility" />';
    }
}

//Append the string to any element you need to create
//If you want to append the image anyways even tho it does not exist,
//You could remove the else in the for-loop and just put the append line below it.

//To top it off, do a console log to display all the errors.
console.log(aErrorSrc);

ノート

スクリプトから 'sを削除することを忘れないでくださいconsole.log();。IE (ofc、他に何か...) は少しばかげているためです。何も実行しません。

これが役に立ったことを願っています

‐ シド

于 2013-10-16T21:31:33.187 に答える