Javascript检查文件是否存在

Question

我正在尝试使用以下代码计算图像是否存在于javascript中：

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>";
            }
        });

在404页上，我的控制台日志显示失败消息，但是在返回200的页面上，我没有收到成功消息。

我希望有人可以向我建议我要去哪里了！

谢谢

Answer 1

通过查看您的实际操作，最好不要使用ajax来执行此操作，而应该依赖Image ，如果返回的数据也不是（浏览器可以理解的）图像，这也会引发错误 。

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