jQuery fallback for .bind("load") listener event

Using the following script to add an event listener, basically it says "Hide the #curtain div (whole page) until .bgImage is downloaded, then wait 1500ms and fade everything in"

My question is this - sometimes due to server lag or glitchy triggering of .bind("load") the page is not fading in. How can I add some kind of timeOut to the effect so that it开发者_如何学Python triggers after X miliseconds if the .bind("load) event is not triggered?

$(document).ready(function(){

// #curtain DIV begins hidden then fades in after .bgImage (curtain) is loaded - prevents "ribbon" loading effect in Chrome

$('#curtain').hide();
$(".bgImage").bind("load", function () {$('#curtain').delay(1500).fadeIn(); });

});

---

$(".bgImage").bind("load", function () {
    setTimeout(function() {
        $('#curtain').delay(1500).fadeIn();
    }, 500);
});

if you want to add a delay to the fadeIn animation this will help. cheers

---

What you could do is this:

var url = $('.bgImage').attr('src');
var img = new Image();
img.onload = function() {
  $('#curtain').delay(1500).fadeIn();
};
img.src = url;

In my experience, as long as you set up the "onload" property of an "Image" object before you set the "src", the handler will always run.

edit — if you wanted to be sure that the thing would eventually fade in, then you could do something like this:

var allDone = false;
var url = $('.bgImage').attr('src');
var img = new Image();
img.onload = function() {
  if (!allDone) {
    $('#curtain').delay(1500).fadeIn();
    allDone = true;
  }
};
setTimeout(img.onload, 5000); // show the hidden stuff after 5 seconds, image or no image
img.src = url;

---

You can use something like this:

var timeout;
$(".bgImage").bind("load", function(){
  clearTimeout(timeout);
  // do something here
});
timeout = setTimeout(function(){
  $(".bgImage").unbind("load");
  // do something else instead
}, 10000);

and maybe also handle errors:

$(".bgImage").bind("error", function(){
  // do something else here as well
});

UPDATE: I added code to cancel your timeout when the load does happen. Those two functions has to be able to cancel out each other.

---

Try adding this to your css:

#curtain {
display:none;
}

and using this in your document read():

$(.bgImage).load(function() {
    $('#curtain').fadeIn(3000);
});