Question

我有一个gif，显示页面加载但是它不起作用。根据我的观点，我的代码似乎没问题。我已经多次尝试修改，添加，删除代码，但它没有用。我已经将img src添加到div loader中，但是preloader只出现了几毫秒。甚至不到一秒钟。

＆＃13;

#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 */
}

＆＃13;

<div id="loader-wrapper">
    <div id="loader"></div>
</div>

＆＃13;

Answer 1

如果您希望在加载页面时加载gif动画，则需要使用JavaScript。在下面的代码片段中，我提供了简单的jQuery，在页面加载时显示gif，然后显示HTML的正文

＆＃13;

jQuery(document).ready(function($) {

  $(window).load(function() {
    $('#loader').delay(500).fadeOut();
    $('#loader-wrapper').delay(500).fadeOut("slow");
  });

  $('body').show();

});

＆＃13;

#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 */
}

＆＃13;

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

＆＃13;

CSS图像消失得太快

1 个答案: