0

如果它们的 src 有效，我正在寻找创建一个小的 javascript 代码来显示图像。

为了更好地组织，我必须将脚本与 html 页面分开。

这是我所做的：HTML

<img id="thmb" src= "http://blog.lefigaro.fr/bd/img-sanctuaire.png" width="50px" height="50px" alt="" ;>

JavaScript

var thumbnail = document.images.thmb;

    if(thumbnail.src)
    {
        if(thumbnail.onerror)
        {
            thumbnail.src = "http://blog.lefigaro.fr/bd/img-sanctuaire.png";
        }
    }
    else
    {
        thumbnail.style.display = "none";
    }

但是它不起作用，当我在 HTML 中清空 src 代码时，图像的边框仍在页面中。如果我写了一个错误的 URL，我们就看不到 JavaScript 中设置的图像。这是用于试验它的 JSFiddle。 http://jsfiddle.net/gUb8X/

我是 JavaScript 的初学者。谢谢 ！

4

4 回答 4

1

A neat inline solution would be this

DEMO http://jsfiddle.net/LstNS/25/

<img src="rando/path" id="image" onerror="this.style.display='none';"/>

jQuery: You can use an ajax call to check if the image file exists

$.ajax({
    url:'http://yourhost/someimage.ext',
    type:'HEAD',
    error: function()
    {
        //file does not exist
    },
    success: function()
    {
        //file exists do something here
    }
});

DEMO http://jsfiddle.net/LstNS/24/

As you can see in the demo, the second image is not loaded and presented as a broken image as it does not exist.

A non jQuery version would be

var img = document.getElementById("myImg");
img.onerror = function () { 
    this.style.display = "none";
}
于 2013-11-10T18:52:06.117 回答
1

You are too late with the test.

Try this

Live Demo

window.onload=function() {
  var thumbContainer = document.getElementById("thmbDiv");
  var thumbnail = document.createElement("img");
  thumbnail.onload=function() {
    thumbContainer.appendChild(thumbnail);
  }
  thumbnail.src = "http://blog.lefigaro.fr/bd/img-sanctuaire.png";
}

Now replace your image with a div with id thmbDiv

if you put placeholders or hide all images you want to test, you can get the src from a data attribute.

Live Demo

window.onload=function() {
  var imgs = document.images; // or document.getElementsByClassName("testImage");
  for (var i=0, n=imgs.length;i<n;i++) { 
    var theImage = imgs[i];   
    var src = theImage.getAttribute("data-src");
    if (src) {
      theImage.onerror=function() {
        this.style.display="none"; // or this.parentNode.removeChild(this);
      }
    }
    theImage.src=src;  
  }
}
于 2013-11-10T18:52:30.483 回答
0

我刚刚找到了一个小技巧来使它成为可能。这不符合惯例，但它有效。我只是使用“alt”图像关键字作为“src”关键字，JavaScript 将 src 赋予 html 中的 alt 属性。

<img id="thmb" width="50px" height="50px" alt="http://blog.lefigaro.fr/bd/img-sanctuaire.png" ;>

Javascript：

var img = document.getElementById("thmb");
img.src= img.alt;

img.onerror = function () {
    img.style.display = "none";
}

http://jsfiddle.net/LstNS/28/

更重要的是，因为我必须使用一个函数来返回所有最终的 html 代码，所以我这样做了：

display: function (data) {
                            var pid = data.record.project_id;
                            var thb = data.record.Thumbnail;
                            var base_url = "<?php echo base_url('project');?>/";
                            function checkImg(){
                                try
                                {
                                    var thumbnail = document.createElement("img");
                                    thumbnail.src = thb;
                                } catch(err) {
                                    //
                                }
                                if(thumbnail.height > 0){
                                    var result = 'src="' + thb + '"';
                                }
                                else
                                {
                                    var result = 'style="display:none;"';
                                }
                                return result;
                            }
                            return '<a href="' + base_url + pid + '"><img id="thumbnail" ' + checkImg() + '" width="50px" height="50px" ></a>';
                        }

我必须感谢您的所有回答，这让我找到了一个好方法！如果您有意见要做，请不要犹豫！;)

于 2013-11-11T16:51:20.593 回答
0

您的代码现在测试thumbnail.src，这意味着您正在测试是否存在src属性，该属性始终存在于语法上有效的img元素。然后你测试一个onerror事件处理程序的存在，因为没有，你选择一个什么都不做的分支。

一种可行的方法是在元素中使用onerror属性img并使其删除元素（或将其从渲染中删除，但实际上删除元素更合乎逻辑，更安全）：

<img id="thmb" src= "http://blog.lefigaro.fr/bd/img-sanctuaire.png"
  width="50" height="50" alt="" onerror="rm(this)">
<script>
function rm(elem) {
  elem.parentNode.removeChild(elem); }
</script>

不幸的是，你不能通过遍历所有img元素的循环来做到这一点。如果您尝试这样做，您的代码将仅在执行图像加载后运行，因此尝试onerror在它们上设置处理程序为时已晚。

于 2013-11-10T19:11:49.647 回答