我有一个 gif 显示页面何时加载，但它不起作用。从我的 Angular 来看，我的代码似乎没问题。我曾多次尝试修改、添加、删除代码，但都没有用。我已经将 img src 添加到 div 加载器，但是预加载器只出现了几毫秒。一秒钟也没有。
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
/* change if the mask should have another color then white */
z-index: 9999;
/* makes sure it stays on top */
}
#loader {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
/* centers the loading animation horizontally one the screen */
top: 50%;
/* centers the loading animation vertically one the screen */
background-image: url("images/Preloader_1.gif");
/* path to your loading animation */
background-repeat: no-repeat;
background-position: center;
margin: -100px 0 0 -100px;
/* is width and height divided by two */
}<div id="loader-wrapper">
<div id="loader"></div>
</div>最佳答案
如果您希望在页面加载时加载 gif 动画，则需要使用 JavaScript。在下面的代码片段中，我提供了简单的 jQuery，它在页面加载时显示一个 gif，然后显示 HTML 的主体
jQuery(document).ready(function($) {
$(window).load(function() {
$('#loader').delay(500).fadeOut();
$('#loader-wrapper').delay(500).fadeOut("slow");
});
$('body').show();
});#loader-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
/* change if the mask should have another color then white */
z-index: 9999;
/* makes sure it stays on top */
}
#loader {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
/* centers the loading animation horizontally one the screen */
top: 50%;
/* centers the loading animation vertically one the screen */
background-image: url("http://img.ffffound.com/static-data/assets/6/77443320c6509d6b500e288695ee953502ecbd6d_m.gif");
/* path to your loading animation */
background-repeat: no-repeat;
background-position: center;
margin: -100px 0 0 -100px;
/* is width and height divided by two */
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="loader-wrapper">
<div id="loader"></div>
</div>
<p>hello</p>
</body>关于html - CSS 图像消失得太快，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40201430/