如何删除默认图像图标

时间:2013-02-05 11:25:53

标签: javascript internet-explorer google-chrome

我遇到了Chrome和IE中出现的交叉签名问题的图片 我希望从外部java脚本文件(我想要这样的东西)的场景。 enter image description here

当图像标记未从源中找到图像时,第一个图像具有十字图标。 mozilla会非常巧妙地处理这个问题,但Chrome和IE会显示一个我不想要的十字图标。

我发现非通用的解决方案当图像没有从每个图像标签上的指定网址获取图像时,我必须传递透明图像网址。 像这样的东西

<img src="i/ibm.png" onerror="this.src='i/1x1trns.png';">

但是在我的页面中有超过20个图像,并且在整个项目中超过200个,所以在这种情况下我想从一个外部javascript文件中处理这个......

所以任何人都知道这个问题,请告诉我一个解决方案...... Thnx的合作

2 个答案:

答案 0 :(得分:1)

var imgs = document.getElementsByTagName('img');

for (var i = 0; i < imgs.length; i++) {
    (function(img_elem) {
        var img = new Image();
        img.src = img_elem.src;
        img.onerror = function() {
             img_elem.src = 'i/1x1trns.png';
        };
    })(imgs[i]);
}

http://jsfiddle.net/Ypa7N/

答案 1 :(得分:1)

<head />标记中定义jQuery有点脏,但你需要为$.ready执行此操作,如果你可以编写自己的$.ready那么它就是只是我们<head />中的一些代码。

在拥有这些图像之前,您需要添加jQuery。

试试此代码

<body>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("img").on("error", function() {
                $(this).attr("src", "i/1x1trns.png");
            });
        });
    </script>
    <img src="not-a-valid-image.png" alt="Logo not found" />
</body>

我在我的一个项目中使用过这种方式。