Изображение CSS слишком быстро исчезает

У меня есть gif, который показывает, когда страница загружается, но она не будет работать. По моему мнению, мой код выглядит нормально. Я несколько раз пробовал модифицировать, добавлять, удалять из кода, но он не работал. Я добавил img src в div-загрузчик, но затем предварительный загрузчик появился всего за пару миллисекунд. Даже секунда.Изображение CSS слишком быстро исчезает

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

источник

2016-10-23 Alx Tioltisan

Если вы ищете, чтобы иметь 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>

источник

2016-10-23 09:48:52

Ну, он работает частично, это показывает лишь немногие милисекунд. –

Да, это потому, что на страницу загрузилось всего несколько секунд. Если у вас есть страница с большим количеством контента (изображения и т. Д.), То она, очевидно, займет больше времени –

vestigedayz.com/Lucius-Payne/ro это демо-версия. Я пытался сделать то, что вам помог, но результат был таким же, как сейчас. –

Изображение CSS слишком быстро исчезает

ответ

Смежные вопросы