問題場(chǎng)景：服務(wù)器圖片丟失，導(dǎo)致頁面上很多圖片是無法正常加載的。

解決辦法：

　　1.本地測(cè)試環(huán)境，圖片使用本地?cái)?shù)據(jù)　　

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

　<script>

　　　　$(document).ready(function () {

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

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

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

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

<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直接在頁面綁定圖片數(shù)據(jù)
　　

　　　　　　<img src="../img/img11.jpg"> //錯(cuò)誤圖片路徑
　　　　　　<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請(qǐng)求獲得圖片數(shù)據(jù)，圖片能正常加載就添加到DIV中，不能則不添加

5.直接在標(biāo)簽上進(jìn)行判斷

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

以上就是本人收集的幾種關(guān)于圖片無法正常加載的方法


　　

總結(jié)

以上是生活随笔為你收集整理的关于图片无法正常加载，JS解决办法合集的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。