Атрибут загрузки не работает в Google Chrome - PullRequest
Новая
       13

Атрибут загрузки не работает в Google Chrome

0 голосов
/ 22 января 2020

Я читал об атрибуте loading, который является новым атрибутом, делающим возможной ленивую загрузку.

Я думаю, что это прекрасное решение, затем я попытался использовать его со следующим HTML структура: 

<img src="imgs/1.jpg" alt="..."/>
<img src="imgs/2.jpg" alt="..." loading="lazy"/>
<img src="imgs/3.jpg" alt="..." loading="lazy"/>
<img src="imgs/4.jpg" alt="..." loading="lazy"/>

Код HTML, приведенный выше, был стилизован с помощью следующего кода CSS: 

*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

.container{
    width: 800px;
    margin: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.container__image{
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

То есть предполагается, что ленивые загружают последние три изображения, но когда я запускаю этот код в Google Chrome v79, он, похоже, не работает. Изображения должны появляться только тогда, когда они появляются в окне просмотра, но согласно информации на вкладке сети все мои изображения загружаются браузером, даже если их нет в окне просмотра.

Тогда я запустил console.log("loading" in HTMLImageElement.prototype) проверить, поддерживает ли Google Chrome v79 эту функцию, и возвращает true . Несмотря на положительный результат, этот инструмент, кажется, не работает должным образом, учитывая результаты, описанные в предыдущем абзаце.

Я только что отметил, что тот же код, что и выше, выглядит хорошо, когда он работает на Codepen и я понятия не имею, почему.

Размещенная страница (Временная) - loading не работает.

Проверка кода - loading работа.

Что мне не хватает? как заставить работать на работающем веб-сайте?

, если это помогает, я нахожусь на Windows 10.

...