I’m using some jQuery that works fine in all browsers except in Internet Explorer 8 (and probably not the earlier versions although I’m not as worried about those.). I’m using jQuery’s .each function to loop over every element in a JavaScript array that is auto generated on my page by the fairly inflexible CMS I’m using.
For example, my CMS writes this array of image objects in javascript to my page:
paths = [];
paths[0] = new Image();
paths[0].src = "/path/to/image1"
paths[1] = new Image();
paths[1].src = "/path/to/image2"
paths[2] = new Image();
paths[2].src = "/path/to/image3"
paths[3] = new Image();
paths[3].src = "/path/to/image4"
I then am using jQuery each function to loop over this array and return all images in a nice little unordered list.
The problem is that while using jquery’s
$(document).ready(function() { ... });
is working fine in FF/Safari/Chrome, etc. and actually able to render my unordered list pretty much immediately, Internet Explorer seems run my document.ready function before it registers that the ‘paths’ array exists in JavaScript (even though this jQuery is included after the code for the image array). I know this because I’m thrown an ‘paths is null/undefined’ error in IE.
When I changed it from
$(document).ready(function() {
to
$(window).load(function() {
my code worked as it should in IE because it only executes my jquery ‘each’ function after the entire page is loaded (which sucks because it slows down render time and causes a ‘lag’ in what I’m trying to do… but hey if it works). However its appearing that IE sometimes still fires off my each function while using $(window).load before it registers that an array named ‘paths’ exists if the website has been cached.
Would anyone know a sure fire way to ensure that the paths variable is registered by IE immediately so my each function doesn’t fail?
Apologies for stating the obvious but are the two pieces of code in the same script /file? You are saying that IE is getting the sequence wrong unlike other browsers so I’m wondering if one or both are Asynchronous.
Another obvious thing is to have your function check that the paths array is not null, so then it doesn’t throw an error. Sorry, if this comment had you throwing your mouse at your screen. Is there any way to get the function that generates the paths array to call the function or at least to set a boolean, which your function can then use to determine if its got the paths array set.
Maybe you could define the function elsewhere on the page and have your jquery do something like this:
document.ready(myfunction());