Мерцание фонового изображения при наведении

Указание у элемента одного файла в качестве фона, а второго файла для эффекта наведения - плохая практика. Чтобы загрузить любой файл, браузеру нужно потратить минимум 0.1 секунду даже на самом быстром интернет соединении. Получается, в этот самый момент элемент остаётся без фона. Это выглядит как моргание, мерцание или глюк фонового изображения.

Вот какой код вызывает эффект мерцания:

.block {
    background-image: url(./photo.jpg);
}
.block:hover {
    /*Когда в в стиле с псевдоклассом указывается фон, он вызывает задержку отображения*/
    background-image: url(./photo-hover.jpg);
}

Такой недочёт воспринимается, как визуальный дефект, и ухудшает имидж сайта в глазах посетителя.

Интерактивный пример:

Демонстрация

PHP код

Открыть демонстрацию Скачать код примера

<?php
if(isset($_GET['photo'])) {
    usleep(100000);
    header('Content-Type: image/jpeg');
    echo file_get_contents('photo-hover.jpg');
    die;
}
?><!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .block {
                width: 300px;
                height: 300px;
                background-size: contain;
                background-image: url(./photo.jpg?&t=<?=microtime(true)?>);
            }
            .block:hover {
                background-image: url(./background_is_changing.php?photo=1&t=<?=microtime(true)?>);
            }
            .btn {
                color: #000;
                display: inline-block;
                margin-bottom: 5px;
                text-decoration: none;
                padding: 5px 10px;
                border: 1px solid #000;
                border-radius: 5px;
            }
            .btn:hover {
                background-color: #ddd;
            }
            .btn.active {
                background-color: #000;
                color: #fff;
            }
        </style>
    </head>
    <body style="font-family: sans-serif;">
        <a class="btn" href="./background_is_changing.php">Обновить страницу</a><br />
        <h1>Наведите курсор на картинку, чтобы она поменяла фон</h1>
        <p>После первого наведения картинка закешируется и моргание пропадёт. Чтобы увидеть его снова, обновите страницу.</p>
        <div class="block"></div>
    </body>
</html>

ПРО подписка для работы с сервисом

Подробнее о тарифах