隱藏破碎的圖像jQuery

我有損壞的圖像內容，在每個頁面的多個圖像。一些圖像具有空的src值，一些只是打破了404鏈接。隱藏破碎的圖像jQuery

我一直在嘗試使用

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

預期它不工作，在IE瀏覽器無法正常工作，並且在鍍鉻我第一次加載後重新載入頁面隱藏圖像。 Google搜索了很多，但所有其他代碼都是相同的。

編輯<img>標籤不適合我。

該代碼有什麼問題？

來源

2013-07-29 D_Guy13

這是快速和簡單的方式 http://stackoverflow.com/questions/92720/jquery-javascript-to-replace-broken-images#answer-21858938 –

這是快速的方式做到這一點 http://stackoverflow.com/questions/92720/jquery-javascript-to-replace-broken-images#answer-21858938 –

用它來代替

<img src="image.png" onError="this.onerror = '';this.style.visibility='hidden';" />

test

，或者你可以爲你的所有圖片做

$(window).load(function() { 
    $("img").each(function(){ 
     var image = $(this); 
     if(image.context.naturalWidth == 0 || image.readyState == 'uninitialized'){ 
     $(image).unbind("error").hide(); 
     } 
    }); 
});

demo

來源

2013-07-29 18:07:55

我無法修復它，我從另一個域獲取內容與pre填充標籤。 –

你可以在jsfiddle上演示它，我可以看到嗎？我試過IE和Chrome，它工作正常。 http://jsfiddle.net/pnSen/6/ –

隨着你的代碼，我必須編輯200 000篇文章:) manualy。這對我來說不是一種選擇。不管怎麼說，還是要謝謝你。希望有人可以修改我的代碼。 –

對於圖像可能存在我覺得最優雅解決方案使用$ ajax，如：

$.ajax({ 
    url: 'your_image.jpg', 
    type: "POST", 
    dataType: "image", 
    success: function() { 
     /* function if image exists (setting it in div or smthg.)*/ 
    }, 
    error: function(){ 
     /* function if image doesn't exist like hideing div*/ 
    } 
});

但有些人喜歡期運用，經過負載喜歡展示自己隱伏圖片：

<img src="your_image.jpg" onload="loadImage()">

兩種解決方案都efective，使用一個適合您的問題最好

好，如果你無法編輯IMG嘗試類似：

$(document).ready(function() { 
    $("#img").hide(); 
    $('#img').load(function() { 
    $("#img").show(); 
    }); 
});

順便說一句，你有圖片ID或者你需要做到這一點的隨機數量的圖片誰的身份證你沒有？

來源

2013-07-29 18:53:06

圖像數量是隨機的，它們不是任何類別的目標或ID，一些頁面包含1個圖像，另外一個包含多個圖像。 –

這是非常簡單的，

你只需要添加的onerror屬性：如果圖像給它隱藏

來源

2013-10-16 14:52:31 PatrickH

我的工作類似一個東西的錯誤

<img src="image.png" onerror='$(this).hide();'/>

在哪裏必須使用包含在圖像url上但在更新DOM之前的JSON提要更新我的DOM，我必須檢測破碎的圖像並避免加載寬度> 1000px的圖像。我嘗試添加內聯onerror解決方案，並在加載頁面後查詢DOM，並在顯示div之前刪除或隱藏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-19 18:15:37 Vish

爲什麼不直接結合DOM事件使用jQuery：

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

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

這爲我工作。

來源

2015-02-09 16:04:08 Jordan

隱藏破碎的圖像jQuery

回答

相關問題