Родная ленивая нагрузка в Chrome - PullRequest
Новая
       20

Родная ленивая нагрузка в Chrome

0 голосов
/ 14 июня 2019

В июне в Chrome добавлена ​​поддержка атрибута загрузки , но он у меня не работает. Изображение загружается, когда его нет в окне просмотра.

  1. Информация о моей сети в DevTools

  2. Пользователь-агент: Chrome / 75.0.3770.80

  3. Включена отложенная загрузка изображений в chrome: // flags

  4. Моя тестовая страница: 

    <p style="margin-bottom: 1000px;">Please scroll down. The image is below the viewport.</p>
<p style="margin-bottom: 1000px;">Way to go&hellip;</p>

<h4>Lazy cat loaded lazily</h4>
<p>If your browser supports native lazy-loading, it loads the first 2 kB of the image in order to display a
    placeholder. Then, it loads the full-size image.</p>
<p>If your browser does not support native lazy-loading, it loads the lazysizes library and sets the
    <code>img</code>'s <code>src</code> to a low-quality image placeholder, which is also around 2 kB in size. Then,
    it loads the full-size image.</p>
<div class="alert alert-warning">The native lazy-loading's 2 kB range request do not work from within Codepen.
    However, you can make this work by copying this to an empty HTML file on your computer.</div>
<!-- <img src="https://demo.tiny.pictures/native-lazy-loading/lazy-cat.jpg?width=500"
    loading="lazy" alt="Lazy cat loaded lazily"> -->
<img src="images/article/photo.jpg" loading="lazy" alt="Lazy turtle">


<script>
    if ('loading' in HTMLImageElement.prototype) {
        console.log('YES');
    } else {
        console.log('NO');
    }
</script>

Можете ли вы сказать мне, я делаю что-то не так или этот атрибут необработан и не работает?

1 Ответ

0 голосов
/ 15 июня 2019

Я запускаю вашу тестовую страницу и получаю

[Вмешательство] Изображения загружаются лениво и заменяются заполнителями. Загрузка событий откладывается. Смотри https://crbug.com/846170

Я нашел несколько примеров lazyload в Интернете, и когда я открыл их демонстрационную страницу, это приглашение все еще появлялось.

Я думаю, это потому, что в этом атрибуте все еще есть ошибка. В конце концов, это все еще обсуждаемый атрибут.

...