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

Уроки

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

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

Самый простой способ включить отложенную загрузку — это добавить атрибут 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=1780810596.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810597.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810598.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810599.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810600.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810601.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810602.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810603.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810604.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810605.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810606.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810607.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810608.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810609.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810610.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810611.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810612.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810613.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810614.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810615.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810616.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810617.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810618.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810619.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810620.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810621.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810622.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810623.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810624.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810625.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810626.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810627.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810628.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810629.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810630.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810631.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810632.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810633.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810634.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810635.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810636.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810637.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810638.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810639.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810640.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810641.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810642.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810643.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810644.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810645.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810646.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810647.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810648.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810649.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810650.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810651.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810652.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810653.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810654.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810655.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810656.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810657.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810658.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810659.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810660.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810661.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810662.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810663.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810664.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810665.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810666.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810667.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810668.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810669.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810670.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810671.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810672.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810673.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810674.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810675.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810676.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810677.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810678.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810679.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810680.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810681.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810682.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810683.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810684.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810685.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810686.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810687.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810688.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810689.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810690.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810691.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810692.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810693.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810694.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./lazyload_add.php?t=1780810695.3936"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
        </div>
    </body>
</html>

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

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

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