javascript：图像未在 Internet Explorer 中加载

Question

我正在尝试使用 javascript 加载一个简单的图像，因为我正在使用以下代码

function loadImage(src) {
    var image = new Image;
    image.onload = function() {
        document.body.appendChild(image);
    };
    image.onerror = function() {
        document.body.appendChild(document.createTextNode('\nError loading as image: ' + this.src));
    };
    image.src = src;
}

loadImage('http://www.linkedin.com/favicon.ico');
loadImage('http://www.facebook.com/favicon.ico');

Fiddle Link

我面临的问题是在 chrome 和 firefox 中工作，但在 Internet Explorer 中无法工作。我不太习惯使用 javascript。

有什么解决办法吗？

Answer 1

IE 不会将 ICO 图像加载到浏览器中，除非其 contentType 为 image/x-icon。

我可以通过查看 Firefox 中的网络选项卡来确认 LinkedIn 图像的 contentType 是 application/octet-stream，这可以解释为什么 IE 不会显示它，而 Facebook 图像的内容类型是 IE 喜欢的 image/x-icon。

除了不请求在其服务器上设置了该类型的图像之外，您无法从浏览器中获取任何信息。我很确定像 LinkedIn 这样的网站会有其他小图片，您可以链接到该网站。

仅供参考，如果您查看其主页的linkedIn 源代码，您会发现一个指向http://s.c.lnkd.licdn.com/scds/common/u/images/logos/favicons/v1/16x16/favicon.ico 的标签在IE 中工作得很好（因为它是image/x-icon）。

Answer 2

还值得注意的是，一些旧版本的 IE（老实说，我不记得 IE8 是否是受影响的版本之一），onload 事件不会触发图像从缓存加载.

function loadImage(src) {
    function doOnLoad() {
        document.body.appendChild(image);  
    }

    var image = new Image;
    image.onload = doOnLoad;
    image.onerror = function() {
        document.body.appendChild(document.createTextNode('\nError loading as image: ' + this.src));
    };
    image.src = src;
    if (image.complete) {
      doOnLoad();
    }
}

Answer 3

call the function on window load :-
<script  type="text/javascript">

function loadImage(src) {
var image = new Image;
image.onload = function() {
    document.body.appendChild(image);
};
image.onerror = function() {
    document.body.appendChild(document.createTextNode('\nError loading as image: '  +     this.src));
};
image.src = src;
}

window.onload=loadImage('http://www.linkedin.com/favicon.ico');

</script>

 the image is not loading, when you call the method after load all the elements then it will work.