Question

我有一个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" );

谢谢

Answer 1

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

测试了！ =＆GT; http://jsfiddle.net/3m3S8/

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

1 个答案: