之前项目中碰到一个问题,检查一个图片是否存在服务器上。我的方法是采用了前端创建Image对象的方法来判断。

具体页面如下:

截图00.png - 大小: 5.47 KB - 尺寸:  x  - 点击打开新窗口浏览全图

JS CODE:

function CheckImgExists(imgurl) {
    var baseurl = "/images/app_icons/";
    var ImgObj = new Image();
    ImgObj.src = baseurl + imgurl;
    if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) {
        return true;
    } else {
        ImgObj = null;
        return false;
    }
}


修改之后没有仔细测试,后来细心同时发现在IE9下有问题(其实所有IE版本都有此问题)问题是:第一次检查图片时,会正确提示图片不存在,第二次直接提示图片存在。实际上图片是不存在的。

截图02.png - 大小: 22.15 KB - 尺寸:  x  - 点击打开新窗口浏览全图

经过调试打印才发现,问题出在 (ImgObj.width > 0 && ImgObj.height > 0) 原来IE创建图片不存在会生成那个经典的带红叉的图片。如下图:

截图01.png - 大小: 35.54 KB - 尺寸: 428 x 240 - 点击打开新窗口浏览全图

截图00.png - 大小: 39.51 KB - 尺寸:  x  - 点击打开新窗口浏览全图

不难发现,创建的图片虽然 filesize为0,但是那个经典的小红叉,还是有高度和宽度的。所以最后去掉高度和宽度的判断就好了,一个filesize足够判断图片是否存在了。