javascript检查图像的存在

时间:2012-12-01 18:22:00

标签: javascript html

我试图显示图像或静态地图图像取决于图像的存在。 我想将我的图像路径传递给java脚本函数,因为路径在我的程序中是动态的。因此,如果图像在给定路径中不存在,则显示静态谷歌地图图像 我正在使用该代码来做到这一点,但似乎无法正常工作。你能救我吗?

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

这是小提琴: http://jsfiddle.net/H2gwu/2/ http://jsfiddle.net/H2gwu/3/

2 个答案:

答案 0 :(得分:2)

修正小提琴:http://jsfiddle.net/HCC6V/

我修复了一些错误:

  • mdata之后的空格
  • 你打开了一个你从未关闭的功能块
  • 你太快宣布了src:如果图像在缓存中,你可能会错过加载事件
  • CSS
  • none周围的错误引号
  • 如果找不到图片,则不打电话显示地图

修正了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 ;

在CSS中:

display: none;

而不是

display: "none";

答案 1 :(得分:0)

对于可能存在的图像,我发现最优雅的解决方案是使用$ ajax,如:

$.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*/
    } 

});