Я работаю над веб-сайтом LINK, и по какой-то причине предварительный загрузчик сломан. Я работаю с некоторыми большими изображениями, которые должны масштабироваться до любого экрана (ужасно для FPS..), и поэтому я использую очень большие изображения (используя медиа-запросы на сервер 1440p и выше, все ниже получается 1080p изображений). Чтобы пользователи не видели пробел, когда изображения не загружены, я использую фиксированный полноэкранный div с предварительным загрузчиком с круговой анимацией, которая исчезает до тех пор, пока содержимое не будет загружено.
Предзагрузчик, который я сделал, имеет два условия:
Код для этого
$(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: "Эй, подожди, я должен предстать перед тобой все! Ах, ну, неважно".
Так или иначе, я ищу достойное решение для предварительного загрузчика, которое:
Кто может помочь? :)
Вы должны включить свойство того, что вы хотите переместить в своем стиле (в этом случае 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/...
img
.complete
? Если так, то я мог бы скопировать код и добавить в него .destroy()
. Или куда я иду не так? Большое спасибо заранее!