CODEWITHSUNDEEP
javascriptjqueryhtmlcssloader
Jack Cash
Jack Cash

Reputation: 149

Loading Gif Page Does not load background images

I have a gif that appears as my site is loading however the gif dissapers and the page appears after everything has loaded except the background images called via css.

How could I have the gif fade away only after the background images have loaded.

I am using this code for the loader:

html:

<html class="loading">
    <!-- All the things -->
</html>

css:

html {
    -webkit-transition: background-color 1s;
    transition: background-color 1s;
}
html, body {
    /* For the loading indicator to be vertically centered ensure */
    /* the html and body elements take up the full viewport */
    min-height: 100%;
}
html.loading {
    /* Replace #333 with the background-color of your choice */
    /* Replace loading.gif with the loading image of your choice */
    background: #333 url('loading.gif') no-repeat 50% 50%;

    /* Ensures that the transition only runs in one direction */
    -webkit-transition: background-color 0;
    transition: background-color 0;
}
body {
    -webkit-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
}
html.loading body {
    /* Make the contents of the body opaque during loading */
    opacity: 0;

    /* Ensures that the transition only runs in one direction */
    -webkit-transition: opacity 0;
    transition: opacity 0;
}

javascript

// IE10+
document.getElementsByTagName( "html" )[0].classList.remove( "loading" );

// All browsers
document.getElementsByTagName( "html" )[0].className.replace( /loading/, "" );

// Or with jQuery
$( "html" ).removeClass( "loading" );

Thank you

Upvotes: 1

Views: 1892

Answers (1)

Herb
Herb

Reputation: 345

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('.splash').fadeTo(555,0, function() {
        $(this).remove();
    });
});
</script>
</head>
<body>
<div class="splash" style="position: absolute; width: 100%; height: 100%; background-image:url(mygif); background-repeat: repeat;">&nbsp;</div>
    <!-- All the things -->
</body>
</html>

tested ! => http://jsfiddle.net/3m3S8/

Upvotes: 1

Related Questions