How to checking if image does exists using javascript?

Question

My Javascript code is like this :

var json = {
        "Hotel": [{
                "ImageUrl": "http://us.dotwconnect.com/poze_hotel/110802-img1-1.jpg"
            }, {
                "ImageUrl": "http://www.google.com/images/srpr/nav_logo14.png"
            }]
    };

    var totalHotel = json.Hotel.length;

    var image = '';
    for(var i=0;i<totalHotel;i++){

        hotelImage = json.Hotel[i].ImageUrl;



        // The "callback" argument is called with either true or false
        // depending on whether the image at "url" exists or not.
        function imageExists(url, callback) {
            var img = new Image();
            img.onload = function() { callback(true); };
            img.onerror = function() { callback(false); };
            img.src = url;
        }

        // Sample usage
        var imageUrl = hotelImage;
        imageExists(imageUrl, function(exists) {
            // console.log('RESULT: url=' + imageUrl + ', exists=' + exists);
             if(!exists){
                console.log('RESULT: url=' + imageUrl + ', exists=' + exists);
                hotelImage = 'https://az853139.vo.msecnd.net/static/images/not-found.png';
            }

        });

        image += '<img style="width:180px; height:120px; margin:9px;" src="'+hotelImage+'" />';


    }
    // console.log(image);
    $('#image').html(image);

Demo and complete code is like this : https://jsfiddle.net/oscar11/9omo18yn/

How to checking if image not found exists using javascript?

I try like that, but it's not working. Image "not found" does not appear

Any solution to solve my problem?

Thank you very much

Its async, see every other answer on how to get an async result outside of the callback — Jamiec, Mar 01 '16 at 19:56
@Jamiec, If image not found, system should display an image `https://az853139.vo.msecnd.net/static/images/not-found.png` — moses toh, Mar 01 '16 at 19:56
Yes i know, but your callback(s) have not run yet when you build the html. — Jamiec, Mar 01 '16 at 19:58
See the second dupe q/a. It adds both as someone else chose that one. — Jamiec, Mar 01 '16 at 20:00
Also see: http://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron — Jamiec, Mar 01 '16 at 20:01
@mosestoh - check out this [modified JSFiddle](https://jsfiddle.net/4x1hap6o/1/) — Corey, Mar 01 '16 at 20:09
Here is a [simplified fiddle as well](https://jsfiddle.net/9omo18yn/1/). — Bjørn Sørensen, Mar 01 '16 at 20:11
@BjørnSørensen, The Image : `https://az853139.vo.msecnd.net/static/images/not-found.png` does not appear — moses toh, Mar 01 '16 at 20:36
@mosestoh - thts coreys point! A simple fix is to do exactly as their fiddle does. It fixes your problem without overcomplicating this. — Jamiec, Mar 01 '16 at 20:45
@mosestoh I missed a save, it seems. Here you go: https://jsfiddle.net/9omo18yn/2/ — Bjørn Sørensen, Mar 01 '16 at 22:19

How to checking if image does exists using javascript?

0 Answers0