leizh00701 leizh00701 - 4 months ago 20
iOS Question

Check whether an image exists, if not set a default image using Javascript

I have a lot of images. like:

<img src="src1"/>
<img src="src2"/>
<img src="src3"/>


Some of the image maybe do not exist. So the browser will show a broken image picture. It is ugly. How to use Javascript not jQuery to determine whether an image exists? If not, give a local image to replace it. Thank you.

I tried the code , it replaced all the images not only those not exist.

function imgError(image) {
image.onerror = "";
image.src = "http://www.hi-pda.com/forum/uc_server/data/avatar/000/85/69/99_avatar_middle.jpg?random=10.20420048222877085";
return true;
}

var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
imgs[i].onerror=imgError(imgs[i]);
}


the images are

<img src="rrrrr" />
<img src="http://www.hi-pda.com/forum/uc_server/data/avatar/000/52/56/39_avatar_middle.jpg"/>


the first picture does not exist , the second one exists. when I run it in chrome , all the picture were replaced...

Answer

I solved it using this code:

function nofind() {
    var img = event.srcElement
    img.src="http://www.cnblogs.com/sys/common/image/fileoperation/icon/default.gif";
    img.onerror = null; 
}

var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
    imgs[i].onError=nofind;
}
Comments