Question

I’m having some difficulties about window.onload and it’s like this:

I’m populating the innerHTML of a div using jquery.magiclick.js and fetching an xml, which has some img definitions, with an AJAX call. The function calls this magiclick function is resided in the document.ready like this:

$().ready(function () {
    loginBanner();
});

And I defined a window.onload function in another js. It’s not needed but I’ll include the code to make myself clearer. it simply calls the window.onload function if there is one defined previously and then the function passed as parameter. Here it goes:

    function addLoadEvent(func) {
      var oldonload = window.onload;
      if (typeof window.onload != 'function') {
        window.document.body.onload = function(){
            alert("onLoad-1");
            func();
        };
      } else {
            window.document.body.onload = function() {
                alert("onLoad-1");
                if (oldonload) {
                    oldonload();
                }
                func();
            };
      }
    }

I’m calling this function at the bottom of the page with a function parameter.

My expectation here is that it will fetch img definitions after the document is ready, and because the definitions include img references, it’ll fetch the image data and then execute my onload function. It works great on Firefox but not on IE.

In IE, it’s calling the magiclick function that fetches the xml then calling my onload function but at the time the onload function executes, xml file have not been fetched.

I’m stuck with that and any help will be deeply appreciated.

So, does anyone have an idea about what I may be doing wrong?

Answer 1

AJAX is asynchronous and does not have to be completed for your window load to fire

Call your code within the ajax success callback

Using jQuery AJAX shorthand method $.get() as example:

$.get( url, function(data){
  /* AJAX success, run  code here */
})