Как избежать мерцания в слайд-шоу, созданном с помощью CSS-анимации?

Я сделал простое слайд-шоу с CSS-анимацией в Angular. Работает хорошо, но между изображениями наблюдается белое мерцание, которое, я полагаю, зависит от загрузки изображения. Есть ли способ избежать этого мерцания и сделать его плавным?

CSS-файл

.bg{
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;

    height: 100vh;

    animation: BgAnimation forwards;
    animation-duration: 8s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-direction: normal;
}

@keyframes BgAnimation {
    0%   { background-image: url(../../assets/outro/1.jpg); }
    33%  { background-image: url(../../assets/outro/2.png); }
    66%  { background-image: url(../../assets/outro/3.jpg); }
    100%  { background-image: url(../../assets/outro/4.png); }
}

HTML-файл

<div class = "bg"></div>

Мне это решение тоже очень помогло.

— 15.04.2024 15:14

html css angular css-animations

15.04.2024 13:21

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Угловой способ — использовать директиву ngOptimizedImage в вашем коде, а затем преобразовать код для работы с тегами изображений вместо фонового изображения!

ngOptimizedImage начало работы

Документы ngOptimizedImage

Мы можем использовать атрибут pilority, чтобы повысить приоритет загрузки ресурса!

<img ngSrc = "cat.jpg" width = "400" height = "200" priority>

Вы можете использовать приведенный ниже CSS для предварительной загрузки изображений (поскольку тег body отображается при первой загрузке, которая немедленно загружает изображения, упомянутые в содержимом), до начала анимации.

body {
    position: relative;
}

body:after {
    content: url(https://placehold.co/600x400/000000/FFFFFF/png) url(https://placehold.co/600x400/FFFFFF/000000/png) url(https://placehold.co/600x400/000000/FFFFFF/png) url(https://placehold.co/600x400/FFFFFF/000000/png);
    height: 0px;
    width: 0px;
    visibility: hidden;
    position: absolute;
    top: -1000px;
}

Вы можете закодировать изображения в base64, чтобы они всегда присутствовали в HTML, но учтите, что это увеличивает размер вашей HTML-страницы (бесполезная трата размера), но это означает, что изображение становится доступным немедленно!

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANS...");

кодировщик изображений base64

Этот подход сокрытия body:after работает лучше: stackoverflow.com/questions/1373142/preloading-css-images Ваш работает, но оставляет пустые места.

— 15.04.2024 15:08

@Tuffling_Tony Не могли бы вы попробовать установить display: none, может сработает!

— 15.04.2024 15:10

15.04.2024 13:41

Предварительная загрузка изображения может помочь вам уменьшить или полностью устранить мерцание.

<!-- Preloading images in the DOM -->
<img src = "../../assets/outro/1.jpg" style = "display:none;" alt = "" />
<img src = "../../assets/outro/2.png" style = "display:none;" alt = "" />
<img src = "../../assets/outro/3.jpg" style = "display:none;" alt = "" />
<img src = "../../assets/outro/4.png" style = "display:none;" alt = "" />

<!-- Or using the preload link tag -->
<link rel = "preload" href = "../../assets/outro/1.jpg" as = "image">
<link rel = "preload" href = "../../assets/outro/2.png" as = "image">
<link rel = "preload" href = "../../assets/outro/3.jpg" as = "image">
<link rel = "preload" href = "../../assets/outro/4.png" as = "image">

Есть решения получше, но я нашел это очень простым в использовании, особенно для небольших приложений.

15.04.2024 13:48