252

jQuery ライブラリで JavaScript を使用して、順序付けられていないリストに含まれる画像のサムネイルを操作しています。画像が読み込まれると 1 つのことを行い、エラーが発生すると別のことを行います。jQueryload()とerror()メソッドをイベントとして使用しています。これらのイベントの後、画像 DOM 要素で .complete をチェックして、jQuery がイベントを登録する前に画像がまだ読み込まれていないことを確認します。

jQuery がイベントを登録する前にエラーが発生した場合を除いて、正しく動作します。私が考えることができる唯一の解決策は、imgonerror属性を使用して、失敗したことを示す「フラグ」をグローバルに（またはそれ自体のノードに）保存し、.completeをチェックするときにjQueryがその「ストア/ノード」をチェックできるようにすることです。

誰もがより良い解決策を持っていますか?

編集：太字の要点と以下の詳細を追加： 画像にロードとエラーイベントを追加した後、画像が完全かどうかを確認しています（別名ロード済み）。そうすれば、イベントが登録される前に画像が読み込まれた場合でも、それがわかります。イベントの後に画像が読み込まれない場合は、イベントが読み込まれたときにそれを処理します。これの問題は、画像が既に読み込まれているかどうかを簡単に確認できますが、代わりにエラーが発生したかどうかはわかりません。

4

15 に答える 15

269

completeとnaturalWidthプロパティをこの順序で確認します。

https://stereochro.me/ideas/detecting-broken-images-js

function IsImageOk(img) {
    // During the onload event, IE correctly identifies any images that
    // weren’t downloaded as not complete. Others should too. Gecko-based
    // browsers act like NS4 in that they report this incorrectly.
    if (!img.complete) {
        return false;
    }

    // However, they do have two very useful properties: naturalWidth and
    // naturalHeight. These give the true size of the image. If it failed
    // to load, either of these should be zero.
    if (img.naturalWidth === 0) {
        return false;
    }

    // No other way of checking: assume it’s ok.
    return true;
}
于 2009-12-30T01:05:09.600 に答える
266

もう1つのオプションは、メモリ内の画像要素を作成し、その属性を元の画像の元の属性に設定することで、イベントonloadやイベントをトリガーすることです。これが私が意味することの例です：onerrorsrcsrc

$("<img/>")
    .on('load', function() { console.log("image loaded correctly"); })
    .on('error', function() { console.log("error loading image"); })
    .attr("src", $(originalImage).attr("src"))
;

お役に立てれば！

于 2009-12-30T01:59:11.973 に答える
25

私は多くの異なる方法を試しましたが、この方法は私にとって唯一の方法でした

//check all images on the page
$('img').each(function(){
    var img = new Image();
    img.onload = function() {
        console.log($(this).attr('src') + ' - done!');
    }
    img.src = $(this).attr('src');
});

すべての画像が DOM に読み込まれ、準備ができたらトリガーされるコールバック関数を追加することもできます。これは、動的に追加された画像にも当てはまります。http://jsfiddle.net/kalmarsh80/nrAPk/

于 2013-07-31T01:15:01.577 に答える
14

imagesLoadedJavaScript ライブラリを使用します。

プレーンな Javascript と jQuery プラグインとして使用できます。

特徴：

資力

于 2013-11-13T16:58:19.770 に答える
4

このページの興味深いソリューションを読んだ後、SLaks と Noyo の投稿に大きく影響された使いやすいソリューションを作成しました。このソリューションは、(執筆時点で) Chrome、IE、Firefox、Safari、およびOpera（すべてWindows上）。また、私が使用した iPhone/iPad エミュレーターでも動作しました。

このソリューションと SLaks および Noyo の投稿との主な違いの 1 つは、このソリューションが主に naturalWidth および naturalHeight プロパティをチェックすることです。現在のブラウザー バージョンでは、これら 2 つのプロパティが最も有用で一貫した結果を提供しているように見えます。

このコードは、画像が完全に読み込まれ、かつ正常に読み込まれた場合に TRUE を返します。画像がまだ完全にロードされていないか、ロードに失敗した場合、FALSE を返します。

画像が 0x0 ピクセル画像の場合、この関数も FALSE を返すことに注意してください。しかし、これらの画像は非常にまれであり、0x0 ピクセルの画像がまだ読み込まれているかどうかを確認するのに役立つ非常に便利なケースは思いつきません :)

最初に、"isLoaded" という新しい関数を HTMLImageElement プロトタイプに追加して、この関数を任意の画像要素で使用できるようにします。

HTMLImageElement.prototype.isLoaded = function() {

    // See if "naturalWidth" and "naturalHeight" properties are available.
    if (typeof this.naturalWidth == 'number' && typeof this.naturalHeight == 'number')
        return !(this.naturalWidth == 0 && this.naturalHeight == 0);

    // See if "complete" property is available.
    else if (typeof this.complete == 'boolean')
        return this.complete;

    // Fallback behavior: return TRUE.
    else
        return true;

};

次に、画像の読み込みステータスを確認する必要があるときはいつでも、「isLoaded」関数を呼び出します。

if (someImgElement.isLoaded()) {
    // YAY! The image loaded
}
else {
    // Image has not loaded yet
}

SLaks と Noyo の投稿に対する giorgian のコメントによると、SRC 属性の変更を計画している場合、このソリューションは Safari Mobile での 1 回限りのチェックとしてしか使用できない可能性があります。ただし、既存の画像要素の SRC 属性を変更する代わりに、新しい SRC 属性を使用して画像要素を作成することで、これを回避できます。

于 2015-07-28T17:53:58.810 に答える
3

リアルタイム ネットワーク検出器 - ページを更新せずにネットワーク ステータスを確認します: (jquery ではありませんが、テスト済みで、100% 動作します:(Firefox v25.0 でテスト済み))

コード：

<script>
 function ImgLoad(myobj){
   var randomNum = Math.round(Math.random() * 10000);
   var oImg=new Image;
   oImg.src="YOUR_IMAGELINK"+"?rand="+randomNum;
   oImg.onload=function(){alert('Image succesfully loaded!')}
   oImg.onerror=function(){alert('No network connection or image is not available.')}
}
window.onload=ImgLoad();
</script>

<button id="reloadbtn" onclick="ImgLoad();">Again!</button>

接続が失われた場合は、もう一度ボタンを押してください。

更新 1: ページを更新せずに自動検出:

<script>
     function ImgLoad(myobj){
       var randomNum = Math.round(Math.random() * 10000);
       var oImg=new Image;
       oImg.src="YOUR_IMAGELINK"+"?rand="+randomNum;
       oImg.onload=function(){networkstatus_div.innerHTML="";}
       oImg.onerror=function(){networkstatus_div.innerHTML="Service is not available. Please check your Internet connection!";}
}

networkchecker = window.setInterval(function(){window.onload=ImgLoad()},1000);
</script>

<div id="networkstatus_div"></div>
于 2013-10-16T14:46:25.613 に答える
2

これは、上記の方法の組み合わせを使用してクロスブラウザーで動作するようにした方法です (画像を dom に動的に挿入する必要もありました)。

$('#domTarget').html('<img src="" />');

var url = '/some/image/path.png';

$('#domTarget img').load(function(){}).attr('src', url).error(function() {
    if ( isIE ) {
       var thisImg = this;
       setTimeout(function() {
          if ( ! thisImg.complete ) {
             $(thisImg).attr('src', '/web/css/img/picture-broken-url.png');
          }
       },250);
    } else {
       $(this).attr('src', '/web/css/img/picture-broken-url.png');
    }
});

注: isIE 変数に有効なブール状態を指定する必要があります。

于 2013-03-30T19:01:09.043 に答える
1

私が理解しているように、 .complete プロパティは非標準です。普遍的ではないかもしれません...FirefoxとIEでは動作が異なるようです。javascript で多数の画像を読み込んでから、完了しているかどうかを確認しています。Firefoxでは、これはうまくいくようです。IE では、画像が別のスレッドに読み込まれているように見えるため、そうではありません。image.src への割り当てと image.complete プロパティのチェックの間に遅延を置いた場合にのみ機能します。

関数が呼び出されたときにどの画像について話しているかを知るためにパラメーターを渡す必要があるため、 image.onload と image.onerror を使用してもうまくいきません。実際には同じ関数の異なるインスタンスではなく、同じ関数を渡すように見えるため、それを行う方法は失敗するようです。したがって、画像を識別するために渡す値は、常にループの最後の値になります。この問題を回避する方法は考えられません。

Safari と Chrome では、エラー コンソールにその画像の 404 が表示されている場合でも、image.complete true と naturalWidth が設定されています。これをテストするために意図的にその画像を削除しました。ただし、上記は Firefox と IE でうまく機能します。

于 2011-10-28T15:31:53.397 に答える
0

このJavaScriptコードを使用すると、画像が正常にロードされたかどうかを確認できます。

document.onready = function(e) {
        var imageobj = new Image();
        imageobj.src = document.getElementById('img-id').src;
        if(!imageobj.complete){ 
            alert(imageobj.src+"  -  Not Found");
        }
}

これを試してみてください

于 2015-12-04T11:53:43.153 に答える