0

I am trying to implement the jQuery orbit slider. I have a div tag that contains several images. The problem I am encountering is the orbit() function is on occasion being called before all the images have loaded. I have tried to solve this by surrounding the orbit function call as follows:

window.onload = function(){jQuery('#img-container').orbit()}

This should ensure that orbit is only called after the page and all the content (including the necessary images) have loaded. However, the onload event is not consistently firing because the image slider does not always load. I notice that if I clear the cache and navigate to the page, then the onload event does not fire, and thus orbit never fires.

Other things I have tried: I have also tried jQuery(window).load() which was unsuccessful. I also tried iterating over each individual image in the container with the .load() function but was not successful. I have been able to resolve this issue on Chrome and FF using something similar to this approach: jquery .one() load and error events not working

Does anyone have any other suggestions to fix this in IE?

ADDITIONAL INFO: I did a test where I use deelay.me to delay the image by a few seconds and doing so made the onload function work consistently. It's only when the image loads quickly that the onload doesn't seem to fire

Community
  • 1
  • 1
Kumaran
  • 1
  • 2
  • This should work in ie also put this code at end of your body and then see i think you are using jquery before intialized – Just code Nov 10 '13 at 03:30
  • I checked and made sure JQuery has loaded before running the onload so I do not believe this is the root cause – Kumaran Nov 10 '13 at 17:30

1 Answers1

0

The proper way to do this in jQuery using the jQuery function:

$(function(){
    //onload stuff here...
});

That should work in IE as well as other browsers.

markasoftware
  • 12,292
  • 8
  • 41
  • 69
  • This is _not_ the same as `window.onload`, you can read this from the documentation you've linked ("`The function to execute when the DOM is ready.`") A proper way in jQuery to implement what OP wants would be: `$(window).load(function () {...})`. – Teemu Nov 10 '13 at 13:26
  • I've tried $(window).load(function () {...}) too but didn't work. I did a test where I use http://deelay.me/ to delay the image by a few seconds and doing so made the onload function work consistently. It's only when the image loads quickly that the onload doesn't seem to fire – Kumaran Nov 10 '13 at 17:28