javascript - hvordan vise alternativt bilde hvis kildebilde ikke finnes? (onerror fungerer i IE, men ikke i Mozilla)

Jeg trenger å vise et alternativt bilde i en celle i tabellen hvis kildbildet ikke blir funnet. For øyeblikket brukes koden nedenfor for å gjøre det.

cell.innerHTML="<img height=40 width=40 src='<%=request.getContextPath()%>/writeImage.htm' onError='ImgErrorVideo(this);'>" 
function ImgErrorVideo(source){
        source.src = "video.png";
        source.onerror = ""; 
        return true; 
}

Nå er problemet at løsningen ovenfor fungerer i Internet Explorer, men ikke i Mozilla.

Vennligst fortell meg noen løsninger som fungerer i alle nettlesere.

Svar #1

Jeg synes dette er veldig fint og kort

<img src="imagenotfound.gif" alt="Image not found" onerror="this.src='imagefound.gif';" />

Men vær forsiktig. Brukerens nettleser vil sitte fast i en uendelig løkke hvis selve onerror-bildet genererer en feil.

REDIGER For å unngå en endeløs løkke, fjern onerror fra det med en gang.

<img src="imagenotfound.gif" alt="Image not found" onerror="this.onerror=null;this.src='imagefound.gif';" />

Ved å kalle this.onerror=null vil det fjerne onerror og deretter prøve å hente det alternative bildet.

NYTT Jeg vil gjerne legge til en jQuery-måte, hvis dette kan hjelpe noen.

<script>
$(document).ready(function()
{
    $(".backup_picture").on("error", function(){
        $(this).attr('src', './images/nopicture.png');
    });
});
</script>

<img class='backup_picture' src='./images/nonexistent_image_file.png' />

Du trenger bare å legge til class='backup_picture' på hvilken som helst img-tag som du vil at et reservebilde skal lastes hvis det prøver å vise et dårlig bilde.

Svar #2

Jeg har fått løsningen på spørsmålet mitt:

jeg har gjort noe sånt som dette:

cell.innerHTML="<img height=40 width=40 alt='' src='<%=request.getContextPath()%>/writeImage.htm?' onerror='onImgError(this);' onLoad='setDefaultImage(this);'>"

function setDefaultImage(source){
        var badImg = new Image();
        badImg.src = "video.png";
        var cpyImg = new Image();
        cpyImg.src = source.src;

        if(!cpyImg.width)
        {
            source.src = badImg.src;
        }

    }


    function onImgError(source){
        source.src = "video.png";
        source.onerror = ""; 
        return true; 
    }

På denne måten fungerer det i alle nettlesere.

Relaterte artikler