>
Добавление ленивой загрузки

Уроки

Добавление ленивой загрузки

Отложенная загрузка — это отличная технология. Её задача — ускорить сайт. Это происходит за счёт загрузки изображений по мере того, как они становятся видны пользователю, а не сразу.

Самый простой способ включить отложенную загрузку — это добавить атрибут loading="lazy" к тегу <img>.

При использовании изображений в качестве фона этапностью загрузки нужно управлять с помощью JavaScript. Это сложнее, поэтому лучше воздержаться от этого способа вывода изображений.

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

Демонстрация
PHP код
HTML код
Открыть демонстрациюСкачать код примера
<?php
if(isset($_GET['t'])) {
    // Симулируем задержку загрузки изображения, как для интернета 4G.
    usleep(100000);
    header('Content-Type: image/jpeg');
    echo file_get_contents('photo.jpg');
    die;
}
$mode = $_GET['mode'] ?? '';
?><!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .product-grid {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr;
                font-size: 20px
            }
            .product-grid img {
                width: 100%;
            }
            .product-grid .product {
                position: relative;
            }
            .product-grid .time {
                position: absolute;
                left: 5px;
                top: 5px;
                background-color: #fff;
                padding: 1px 4px;
            }
            .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>
        <script>
            // Функция, которая добавляет на изображение время окончания загрузки
            function endLoading(el) {
                var time = performance.now()/1000;
                el.parentNode.insertAdjacentHTML("beforeend", '<div class="time">'+time+' с</div>');
            }
            window.addEventListener("load", (event) => {
                document.querySelector('#page-load').innerHTML = 'Страница загрузилась (событие window.onload) за <b>'+(performance.now()/1000)+'с</b>.';
            });
        </script>
    </head>
    <body style="font-family: sans-serif;">
        Режим: <a class="btn <?=$mode === '' ? 'active' : ''?>" href="./lazyload_add.php">Обычный режим</a> <a class="btn <?=$mode === 'lazy' ? 'active' : ''?>" href="./lazyload_add.php?mode=lazy">Режим отложенной загрузки</a>
        <br />
        <p>При отложенной загрузке событие window.load отрабатывает сразу.</p>
        <p id="page-load">Тут отобразится время загрузки страницы (вызова события window.onload)</p>
        <div class="product-grid">
<?php for($i = 0; $i < 100;++$i) { ?>
<div class="product">
    <img src="./lazyload_add.php?t=<?=microtime(true)+$i?>" <?=isset($_GET['mode']) && $_GET['mode'] === 'lazy' ? 'loading="lazy"' : ''?> onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<?php } ?>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .product-grid {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr;
                font-size: 20px
            }
            .product-grid img {
                width: 100%;
            }
            .product-grid .product {
                position: relative;
            }
            .product-grid .time {
                position: absolute;
                left: 5px;
                top: 5px;
                background-color: #fff;
                padding: 1px 4px;
            }
            .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>
        <script>
            // Функция, которая добавляет на изображение время окончания загрузки
            function endLoading(el) {
                var time = performance.now()/1000;
                el.parentNode.insertAdjacentHTML("beforeend", '<div class="time">'+time+' с</div>');
            }
            window.addEventListener("load", (event) => {
                document.querySelector('#page-load').innerHTML = 'Страница загрузилась (событие window.onload) за <b>'+(performance.now()/1000)+'с</b>.';
            });
        </script>
    </head>
    <body style="font-family: sans-serif;">
        Режим: <a class="btn active" href="./lazyload_add.php">Обычный режим</a> <a class="btn " href="./lazyload_add.php?mode=lazy">Режим отложенной загрузки</a>
        <br />
        <p>При отложенной загрузке событие window.load отрабатывает сразу.</p>
        <p id="page-load">Тут отобразится время загрузки страницы (вызова события window.onload)</p>
        <div class="product-grid">
<div class="product">
    <img src="./lazyload_add.php?t=1788309324.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309325.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309326.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309327.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309328.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309329.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309330.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309331.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309332.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309333.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309334.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309335.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309336.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309337.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309338.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309339.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309340.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309341.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309342.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309343.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309344.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309345.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309346.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309347.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309348.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309349.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309350.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309351.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309352.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309353.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309354.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309355.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309356.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309357.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309358.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309359.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309360.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309361.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309362.5959"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309363.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309364.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309365.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309366.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309367.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309368.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309369.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309370.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309371.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309372.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309373.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309374.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309375.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309376.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309377.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309378.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309379.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309380.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309381.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309382.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309383.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309384.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309385.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309386.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309387.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309388.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309389.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309390.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309391.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309392.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309393.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309394.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309395.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309396.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309397.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309398.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309399.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309400.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309401.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309402.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309403.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309404.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309405.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309406.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309407.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309408.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309409.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309410.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309411.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309412.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309413.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309414.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309415.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309416.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309417.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309418.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309419.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309420.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309421.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309422.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1788309423.596"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
        </div>
    </body>
</html>

Тарифные планы для работы с сервисом

Выбрать
Выбрать

Доп. страницы

Для активной подписки
тратьте в течение года
Любой сайт
*0.3 - 3₽ / 1 страница

Дополнительные страницы для тарифа «Подписка».

Пополнение через личный кабинет.

*Цена зависит от активной подписки. Чем дороже тариф — тем дешевле дополнительные страницы.

x

Мы используем cookie. Продолжая пользоваться сайтом, вы соглашаетесь на обработку персональных данных в соответствии с политикой конфиденциальности. Соглашаюсь