0

введите сюда описание изображенияЕсть прелоадер, его формат .gif. Все хорошо, все работает, но он отображается обычной картинкой, а не гифкой. В чем может быть проблема? JS:

var preload = $("#main_preload"), 
w = $(window).width() / 2 - 30, 
h = $(window).height() / 2 - 30;
preload.html('<img src="../images/loader.gif" alt="load content."/>');
$(window).load(function () {
    setTimeout(function () {
        preload.animate({opacity: "0"}, 50, function () {
            preload.html("")
        });
        $("#wrapper").animate({opacity: "1"}, 50)
    }, 1000)
});

HTML:

<span id="main_preload"></span>
<div id="wrapper">
   <header></header>
   <div class ="middle"></div>
   <footer></footer>
</div>

CSS:

#main_preload{
    position: fixed;
    width: 100%;
    height: 100%;
}

#wrapper {
    opacity: 0;
}
6
  • Ну вы хотя бы гифку покажите)) 16 мая 2018 в 12:05
  • а в этом есть необходимость? просто обычная анимированная гифка
    – aquido
    16 мая 2018 в 12:08
  • Да, необходимость есть. Потому что у вас обычный код и разметка. Кстати, в html было бы также неплохо показать, что такое #wrapper. 16 мая 2018 в 12:15
  • в wrapper входит классическая разметка, т.е. header, middle, footer
    – aquido
    16 мая 2018 в 12:16
  • Пожалуйста, отразите это в вопросе. Не обязательно со стилями для начала, просто что бы понимать структуру. 16 мая 2018 в 12:17

1 ответ 1

2

Все работает, как положено. Наверное, все же проблема в гифке?

var preload = $("#main_preload"),
  w = $(window).width() / 2 - 30,
  h = $(window).height() / 2 - 30;
preload.html('<img src="https://i.gifer.com/9eFm.gif" alt="load content."/>');
$(window).load(function() {
  setTimeout(function() {
    preload.animate({
      opacity: "0"
    }, 1000, function() {
      preload.html("")
    });
    $("#wrapper").animate({
      opacity: "1"
    }, 1000)
  }, 2000)
});
#main_preload {
  position: fixed;
  width: 100%;
  height: 100%;
}

#wrapper {
  opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="main_preload"></span>
<div id="wrapper">
  <header></header>
  <div class="middle">Главный контент</div>
  <footer></footer>
</div>

8
  • мне ее скинули в скайпе и я ее просто сохранил, возможно я не так что-то сделал?
    – aquido
    16 мая 2018 в 14:15
  • @aquido Что и приводит нас к моему первому комментарию. Ну вы хотя бы гифку покажите)) 17 мая 2018 в 4:16
  • добавил гифку в вопрос
    – aquido
    17 мая 2018 в 10:05
  • @aquido Ну так она не gif, а png. 17 мая 2018 в 10:33
  • но в проекте у меня она gif
    – aquido
    17 мая 2018 в 10:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.