關於圖片無法正常加載，JS解決辦法合集

問題場景：服務器圖片丟失，導致頁面上很多圖片是無法正常加載的。

解決辦法：

　　1.本地測試環境，圖片使用本地數據　　

<img src="images/banner222.png" id="imgErr">　　//丟失的數據
<img src="images/banner.png" class="imgErr">　　//正常顯示

　<script>

　　　　 $(document).ready(function () {

 $("#imgErr").error(function () {
 $(this).attr("src", "images/shihua.png");
 });
 });
</script>
本地測試OK，但是由於數據是由PHP直接在頁面綁定的，如果數據量太大，或者網絡不太好的情況下，可能會對這個方法造成影響

　　2.使用Input按鈕來測試圖片是否存在
　　

<input type="button" name="" value="載入圖片" onclick="addImg('../img/img43.JPG','../img/img2.jpg')" />　　

第一個圖片路徑是要檢測的圖片路徑，第二個可以用來替換的圖片路徑

<script>

 function addImg(isrc,nullImg) {
 var Img = new Image();
 Img.src = isrc;
 Img.onload = function () {
 console.log('圖片存在');
 };
 Img.onerror=function() {
 console.log('圖片不存在');
 };
 }
</script>

　　3.由PHP直接在頁面綁定圖片數據
　　

　　　　　　<img src="../img/img11.jpg"> //錯誤圖片路徑
　　　　　　<img src="../img/img2.jpg">
　　　　　　<img src="../img/img3.JPG">
　　　　　　<img src="../img/img4.JPG">　　　　

　　　　　　<script>

　　　　　　　　　　var o=$('img');

 　　　　　　　　for(var i=0;i< o.length;i++){
 　　　　　　　　var nullImg='../img/timg.jpg';
 　　　　　　　　var qq=o.eq(i).attr('src');
 　　　　　　　　addImg(qq,i,nullImg);
 　　　　　　　　 }
 　　　　　　　　function addImg(isrc,i,nullImg) {
 　　　　　　　　var Img = new Image();
 　　　　　　　　Img.src = isrc;
 　　　　　　　　Img.onload = function () {
 　　　　　　　　console.log('圖片存在');
 　　　　　　　　};
 　　　　　　Img.onerror=function() {
 　　　　　　console.log('圖片不存在');
 　　　　　　$('img').eq(i).attr('src',nullImg);
 　　　　　　};
 　　　　　　}
　　　　　　</script>

　　4.AJAX請求獲得圖片數據，圖片能正常加載就添加到DIV中，不能則不添加

 

5.直接在標簽上進行判斷

<img src="image.gif" onerror="alert('圖片不存在')" />

以上就是本人收集的幾種關於圖片無法正常加載的方法