Предварительно прервано, отображается только после загрузки страницы, только в Chrome

0

Я работаю над веб-сайтом LINK, и по какой-то причине предварительный загрузчик сломан. Я работаю с некоторыми большими изображениями, которые должны масштабироваться до любого экрана (ужасно для FPS..), и поэтому я использую очень большие изображения (используя медиа-запросы на сервер 1440p и выше, все ниже получается 1080p изображений). Чтобы пользователи не видели пробел, когда изображения не загружены, я использую фиксированный полноэкранный div с предварительным загрузчиком с круговой анимацией, которая исчезает до тех пор, пока содержимое не будет загружено.

Предзагрузчик, который я сделал, имеет два условия:

  1. Устанавливайте на экране, пока не будет загружена вся страница. Затем погаснуть
  2. По крайней мере.5s на экране, даже если страница загружается быстрее, чем.5s, а затем исчезает в.5s

Код для этого

$(document).ready(function () {
    setTimeout(function () {
        $('.loading').css('opacity', '0');
    }, 500);
    setTimeout(function () {
        $('.loading').remove();
    }, 1500);
});

CSS for the fixed div in front of the content
.loading {
position:fixed;
top:0;
left:0;
z-index:9999;
width:100%;
height:100%;
background-color:#1abc9c;
transition:.5s;

}

Это кажется прекрасным для всех браузеров, однако для Chrome, где страница загружается, чем после.5 с после загрузки страницы, предварительный загрузчик вспыхивает и быстро исчезает.

Если бы предварительный загрузчик мог говорить, он, вероятно, сказал бы в Chrome: "Эй, подожди, я должен предстать перед тобой все! Ах, ну, неважно".

Так или иначе, я ищу достойное решение для предварительного загрузчика, которое:

  1. оставаться неподвижным над всем содержимым, пока не будет загружен весь контент (включая фоновые изображения), а затем
  2. исчезают с длительностью анимации.5 с.
  3. с минимальным временем пребывания на экране.5s, даже если все содержимое загружено быстрее, чем 0,5 с.

Кто может помочь? :)

  • 0
    У вас есть переход CSS на непрозрачность? Если так, пожалуйста, опубликуйте стили.
  • 0
    Я добавил переход CSS, хотя это очень просто. :)
Теги:
google-chrome
preloader

1 ответ

0
Лучший ответ

Вы должны включить свойство того, что вы хотите переместить в своем стиле (в этом случае opacity или all), и в зависимости от версий браузера, включают префиксы нескольких браузеров:

.loading {
    transition: opacity .5s;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -o-transition: opacity .5s;
}

Вы также можете добиться того же результата лучше, используя jQuery, и удалить переход:

$('.loading').delay(500).fadeOut(500, function() {
    $(this).remove();
});

Другое дело, что изображение привет-res не обязательно загружается в течение 0,5 секунд. Здесь хороший способ проверить, загружено ли изображение: qaru.site/questions/27346/...

  • 0
    Спасибо! Постараюсь сообщить как можно скорее. :)
  • 0
    Бонусные баллы за легкую часть Javascript! Спасибо, любезно. У меня возникли некоторые проблемы, хотя я смотрю на код, на который вы ссылаетесь, потому что, насколько я знаю, код проверяет только одно изображение или выполняет функцию внутри .one (), как только все объекты, на которые нацелено селектор img .complete ? Если так, то я мог бы скопировать код и добавить в него .destroy() . Или куда я иду не так? Большое спасибо заранее!
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню