加载Gif页面不加载背景图像

Loading Gif Page Does not load background images

本文关键字：加载 背景 图像 Gif      更新时间：2023-09-26

我有一个gif，它在我的网站加载时出现，但gif会在加载完所有内容后消失，页面也会出现，但通过css调用的背景图像除外。

我怎么能只有在加载了背景图像后才让gif淡出呢。

我正在为加载器使用以下代码：

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" );

感谢

<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>

已测试！=>http://jsfiddle.net/3m3S8/

相关文章：