CODEWITHSUNDEEP
javascriptjquery
HD..
HD..

Reputation: 1476

Hide loader after script and images are loaded Completely

I am included external script and lib. and images are in DOM. I want to remove loader after images and scripts are loaded completely in URL.

window.onload= function(){
    $(".loader").hide();
}

but it is not working before script or image loaded it is executed.

Upvotes: 1

Views: 8723

Answers (2)

P. Frank
P. Frank

Reputation: 5745

you syntax is incorrect. use this

replace

window.onload= function(){

by

$(window).load(function() {})

the $(window).load() function run when the page is fully loaded including graphics. see https://api.jquery.com/load-event/

Upvotes: 2

gon250
gon250

Reputation: 3545

you can check if the image is loaded using a setTimeout, take a look below: 

setTimeout(function () {
        //Check if the image or whatever is loaded  
    }, 30000);

Also you can create an attribute to don't enter again in the setTimeout after your stuffs are loaded, like:

var isLoaded = 0;

if(isLoaded == 0){
        setTimeout(function () {
             isLoaded  = 1;
            //Check if the image or whatever is loaded  
        }, 30000);
}

You can encapsulate your code in different cases:

  • The code below it'll wait for all the images and text assets to finish loading before executing.

    $(window).load(function(){ //your code });

  • The code below it'll wait for the text assets to be loaded

    $(document).ready(function(){ //your code });

I hope it's helps.

Upvotes: 0

Related Questions