0

I am trying to load a simple image using javascript, for that I am using following code

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

The problem I am facing is whole thing working in chrome and firefox but not working in internet explorer. I am not much used to with javascript.

Any solutions ?

Abhishek
  • 1,682
  • 2
  • 17
  • 29
  • i am downloading .ico file only, its working for fb and google in internet explorer just linkedin file is not loading :( – Abhishek Mar 06 '14 at 07:13
  • See http://stackoverflow.com/questions/1439232/ie-doesnt-show-ico-icons-in-html-if-not-served-as-image-x-icon. If the icon is served as a particular type of file, then IE won't display it. You really ouught to NOT be using .ICO files in your web page. – jfriend00 Mar 06 '14 at 07:15

3 Answers3

1

IE will not load an ICO image into the browser unless its contentType is image/x-icon.

I can confirm by looking at the network tab in Firefox that the contentType for the LinkedIn image is application/octet-stream which would explain why IE will not show it while the Facebook image has a content type of image/x-icon which IE likes.

There is nothing you can from the browser other than don't request an image that has that type set on its server. I'm quite sure that sites like LinkedIn will have other small images from there site that you can link to.

FYI, if you look at the linkedIn source for it's homepage, you will find a tag that points to http://s.c.lnkd.licdn.com/scds/common/u/images/logos/favicons/v1/16x16/favicon.ico which works just fine in IE (because it's an image/x-icon).

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • check this fiddle http://jsfiddle.net/iamabhiee/tEhCR/3/ facebook image gets loaded in all browser, while linkedin doesnt get load in ie – Abhishek Mar 06 '14 at 06:58
  • @UndercoverDeveloper - OK, I think I've summarized the issue here now. – jfriend00 Mar 06 '14 at 07:24
0

It is also worth noting that some older versions of IE (and to be honest, I don't recall if IE8 is one of the affected ones), the onload event is NOT fired of the image is loaded from cache.

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();
    }
}
Jeremy J Starcher
  • 23,369
  • 6
  • 54
  • 74
-1
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.
Naveen Chandra Tiwari
  • 5,055
  • 3
  • 20
  • 26