CODEWITHSUNDEEP
jquerytimeoutwaitforimages
jvan27
jvan27

Reputation: 21

Add timeout to waitForImages

I am trying to create a loading page that waits until all the images are loaded. This is a great plugin but I was wondering if there was a way to add a timeout to it so that if the loading is really quick, the loading page doesnt just flash at you...

this is what I have written but it doesnt seem to work. So if all the images have loaded AND it is after 3 seconds then get rid of the loading page. If anyone has any suggestions that would be greatly appreciated! thank you!

var timeout = false;

setTimeout(function() {
    timeout = true;
    console.log("TIMEOUT!");
}, 3000);

$("html").css({overflow: 'hidden' })


$('html').waitForImages({
    waitForAll: true,
    finished: function() {
       if (timeout == true) {
           $('#loading').css({display: 'none'});
           $("html").css({overflow: 'scroll' });
           $('html').unbind('touchmove');
       }
    }

});

Upvotes: 1

Views: 260

Answers (1)

Francisco
Francisco

Reputation: 4101

I would modify your code just a little:

var timeout = false;
var loadedimages = false;

setTimeout(function() {
    console.log("TIMEOUT!");
    if (loadedimages == true) hideloadingdiv();
    else timeout = true;

}, 3000);

$("html").css({overflow: 'hidden' })


$('html').waitForImages({
    waitForAll: true,
    finished: function() {
       if (timeout == true) {
           hideloadingdiv();
       }
       else
       {
           loadedimages = true;
       }
    }  
});

function hideloadingdiv()
{
    $('#loading').css({display: 'none'});
    $("html").css({overflow: 'scroll' });
    $('html').unbind('touchmove');
}

Upvotes: 1

Related Questions