10

各ページに壊れた画像、複数の画像を含むコンテンツがあります。一部の画像には空の src 値があり、一部の画像には 404 リンクが壊れています。

私は使用しようとしてきた

<script type="text/javascript">
$(document).ready(function () {
    $("img").error(function(){
    $(this).hide();
    });
}); 
</script>

期待どおりに動作せず、IE では動作せず、クロムでは最初の読み込み後にページをリロードして画像を非表示にする必要があります。よくグーグルで検索しましたが、他のコードはすべて同じです。

タグを編集すること<img>は、私にとってオプションではありません。

そのコードの何が問題になっていますか?

4

5 に答える 5

2

DOM イベントを jQuery と組み合わせてみませんか。

$("img").each(function () {
    var $this = $(this);

    this.onerror = function() {
        $this.hide();
    };
});

これは私にとってはうまくいきました。

于 2015-02-09T16:04:08.413 に答える
0

画像の URL で構成される JSON フィードを使用して DOM を更新する必要がありましたが、DOM を更新する前に、破損した画像を検出し、幅が 1000px を超える画像を読み込まないようにする必要がありました。ページをロードした後にインラインの onerror ソリューションとクエリ DOM を追加して、表示される前に div を削除または非表示にしようとしましたが、コストがかかり、ユーザー エクスペリエンスが妨げられました。これはより良いアプローチであり、DOM クエリを保存し、どのブラウザーでも動作すると思います。

これがjsfiddleの解決策です。 http://jsfiddle.net/vchouhan/s8kvqj3e/60/

$(document).ready(function () {
// For demo purposes, I'm going to pass this URL variable to my function.
//resolved URL
var url = "http://asmarterplanet.com/mobile-enterprise/files/bus-stop-app.png",

//broken url
 brokenUrl = "http://pbs.twimg.com/profile_images/481800387230318592/pVyU2bzj_normal.jpeg";

    //Method takes the URL as a parameter to check if it resolves
var f_testImage = function(url){
    /*
        When the preloadImages Async call returns the object
        Validate and do the needful 
    */
    $.when(f_preloadImages(url)).done(function (returnedObj){
        /*
            If successful and Width > 500 
            (this was for my purpose, you can ignore it) 
        */
        if (returnedObj && returnedObj.width > 500) {
            alert("width greater than 500px: "+ returnedObj.width + "px"); // Alerts src.width > 500                 
        } else {
            alert("width smaller than 500px: "+ returnedObj.width + "px"); // Alerts src.width < 500               
        }
    }).fail(function(returnedObj){     // Fail condition captured through imgDfd.reject();      
        alert("image URL is broken and the width is: " + returnedObj);
    });
};

var f_preloadImages = function(imgurl) {
    var img = new Image(); // declare new img object
    imgDfd = new $.Deferred();// declare new deferred object

    // Test onload
    img.onload = function () {
        return imgDfd.resolve(img);
    };
    // Test onerror
    img.onerror = function () {
        return imgDfd.reject(0);
    };

    //Add imgURL to imgSrc after onload and onerror is fired
    img.src = imgurl;
    return imgDfd.promise();
};

//Fire testImage with url and then with brokenUrl as parameter
f_testImage(brokenUrl);

});

于 2014-09-19T18:15:37.050 に答える