javascript check existence of an image

Question

I'm trying to show either an image or static map image depends on existence of the image. I want to pass my image path to java script function since the path is dynamic in my program. So, if the image does not exist in given path, show the static google map image.
I am using that code to do that, but seems to be not working. Can you help me?

      function initialize() {
        var img = document.getElementById("super");
        var mdata = $('#image_div');
        var mpath = mdata .data('path');
        img.src =mpath ;

        img.onerror = function( ) {
        document.getElementById("super").style.display = "block";
        alert("failed to load");
    }
    img.onload = function( ) {
        alert("do nothing");
    };
}

Here is the fiddle: http://jsfiddle.net/H2gwu/2/ http://jsfiddle.net/H2gwu/3/

Denys Séguret · Accepted Answer · 2012-12-01 18:25:50Z

2

Fixed fiddle : http://jsfiddle.net/HCC6V/

Some errors I fixed :

a space after mdata
you opened a function block you never closed
you declared the src too soon : you may miss the load event if the image is in cache
bad quotes around none in the CSS
no call to show the map if image not found

Fixed JS :

var img = document.getElementById("super");
var mdata = $('#image_div');
var mpath = mdata.data('path');
img.onload = function( ) {
    alert("do nothing");
}
img.onerror = function( ) {
    document.getElementById("super").style.display = "block";
    alert("failed to load");
    $('#google_map').show();
}
img.src =mpath ;

In the CSS :

display: none;

instead of

display: "none";

answered Dec 1, 2012 at 18:25

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

John Smith Over a year ago

Thanks, I do not want to show both,though. The default the image should be displayed, else the map. Can you please update your code to do that ?

Denys Séguret Over a year ago

@JohnSmith See edit. But you should try to test after each line you write until you get the feeling of this. That was much too many small errors.

Ivan Pavić · Accepted Answer · 2013-07-29 19:10:19Z

0

For images that might exist i find most elegant solution is useing $ajax, like:

$.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 or setting default image*/
    }

});

answered Jul 29, 2013 at 19:10

Ivan Pavić

5485 silver badges23 bronze badges

1 Comment

Stephen Over a year ago

Using POST can have weird side effects, depending on one's setup. For instance, if you're fetching images via a rest interface, using POST can effectively wipe out that image. That's because POST is not idempotent and it is not "safe". GET is "safe". See here. Also, beyond that, POST shouldn't be cached, so you end up with a more heavy handed solution when it's a repeatedly visited page.

Collectives™ on Stack Overflow

javascript check existence of an image

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related