Javascript检查文件是否存在

Question

I am attempting to work out whether an image exists in javascript using the code below:

var image_url = 'http://www.tester.co.uk/shop/images/product_thumbs/t_' + prod.images.toLowerCase() + '.jpg';

        $.ajax({
            url: image_url,
            type:'HEAD',
            error:
            function(msg_no){
                console.log("fail."); 
                markup += "<td class='movie-image'><img src='/shop/html_templates/files/images/default-category-image.gif'/></td>";
            },
            success:
            function(msg_yes){
                console.log("success."); 
                markup +=  "<td class='movie-image'><img src='/shop/images/product_thumbs/t_" + prod.images.toLowerCase() + ".jpg'/></td>";
            }
        });

On the 404 pages my console log shows the fail message, however on the pages returning 200 I am not getting the success message.

I'm hoping someone can advise me on where I'm going wrong!

Thanks

Answer 1

By looking at what you are actually doing, it might be wiser for you to not do this by ajax and instead rely on Image , which will throw an error if the returned data is not an (understood by browser) image, too.

var img = new Image();
img.onerror = function (msg_no) {
    console.log("fail."); 
    markup += "<td class='movie-image'><img src='/shop/html_templates/files/images/default-category-image.gif'/></td>";
}
img.onload = function (msg_yes) {
    console.log("success."); 
    markup +=  "<td class='movie-image'><img src='/shop/images/product_thumbs/t_" + prod.images.toLowerCase() + ".jpg'/></td>";
}
img.src = image_url; // fetch after listeners attached