Отложенная загрузка контента: Полное руководство по jQuery Lazy для максимальной производительности

loading="lazy"

<!-- Подключение jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 
<!-- Подключение jQuery Lazy -->
<script src="https://cdn.jsdelivr.net/npm/jquery.lazy@1.7.10/jquery.lazy.min.js"></script>

data-src

src

<!-- Для изображений -->
<img class="lazy" data-src="image.jpg" alt="Описание изображения">
 
<!-- Для iframe -->
<iframe class="lazy" data-src="https://example.com" frameborder="0"></iframe>
 
<!-- Для видео -->
<video class="lazy" data-src="video.mp4" controls></video>

$(function() {
    $('.lazy').Lazy({
        // Настройки (опционально)
        threshold: 200,
        visibleOnly: true,
        effect: 'fadeIn',
        effectTime: 500
    });
});

lazy

threshold: 200

// Пример для Bootstrap 4 табов
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var target = $(e.target).attr("href");
    $(target).find('.lazy').Lazy();
});
 
// Пример для бесконечной прокрутки
$('.load-more').click(function() {
    $.ajax({
        url: 'more-content.html',
        success: function(data) {
            $('#content-container').append(data);
            $('#content-container .lazy').Lazy();
        }
    });
});

<img class="lazy" 
     data-src="high-res.jpg" 
     src="image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200' viewBox='0 0 300 200'%3E%3Crect width='100%25' height='100%25' fill='%23f0f0f0'/%3E%3C/svg%3E"
     alt="Описание">
 
$('.lazy').Lazy({
    afterLoad: function(element) {
        element.css('filter', 'blur(5px)');
        element.on('load', function() {
            $(this).css('filter', 'blur(0)');
        });
    }
});

data-srcset

data-sizes

<img class="lazy" 
     data-src="image-480.jpg" 
     data-srcset="image-480.jpg 480w, image-800.jpg 800w, image-1200.jpg 1200w"
     data-sizes="(max-width: 600px) 480px, 800px"
     alt="Адаптивное изображение">
 
$('.lazy').Lazy({
    useSrcset: true,
    srcsetAttribute: 'data-srcset'
});

<picture>

<picture>
    <source class="lazy" data-srcset="image.avif" type="image/avif">
    <source class="lazy" data-srcset="image.webp" type="image/webp">
    <img class="lazy" data-src="image.jpg" alt="Современные форматы">
</picture>
 
$('.lazy').Lazy({
    afterLoad: function(element) {
        if(element.is('source')) {
            var picture = element.parent('picture');
            var img = picture.find('img');
            img.attr('src', element.attr('data-srcset'));
            img.addClass('loaded');
        }
    }
});

<div class="lazy-youtube" 
     data-embed="dQw4w9WgXcQ"
     style="background-image: url('https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg')">
    <div class="play-button"></div>
</div>
 
$('.lazy-youtube').Lazy({
    afterLoad: function(element) {
        var embed = element.data('embed');
        var iframe = '<iframe src="https://www.youtube.com/embed/' + embed + '?autoplay=1" frameborder="0" allowfullscreen></iframe>';
        element.html(iframe);
    }
});

<div class="lazy-map" 
     data-address="1600 Amphitheatre Parkway, Mountain View, CA"
     style="background: #f0f0f0 url('map-placeholder.jpg') center/cover">
    <button class="btn btn-primary">Показать карту</button>
</div>
 
$('.lazy-map').Lazy({
    bind: 'click', // Загружать только при клике
    afterLoad: function(element) {
        var address = element.data('address');
        var iframe = '<iframe src="https://maps.google.com/maps?q=' + encodeURIComponent(address) + '&output=embed" frameborder="0"></iframe>';
        element.html(iframe);
    }
});

<div class="video-container" style="position: relative;">
    <img class="lazy" 
         data-src="video-poster.jpg" 
         alt="Превью видео"
         style="width: 100%; display: block;">
    <div class="play-overlay"><i class="fas fa-play"></i></div>
    <video class="d-none" 
           data-src="video.mp4" 
           controls poster="video-poster.jpg"></video>
</div>
 
$('.video-container').each(function() {
    var container = $(this);
    var playButton = container.find('.play-overlay');
 
    playButton.click(function() {
        var video = container.find('video');
        video.removeClass('d-none').attr('src', video.data('src'));
        container.find('img').remove();
        video[0].play();
    });
});

<div class="audio-player">
    <div class="audio-controls">
        <button class="play-btn">▶</button>
        <div class="progress-bar"></div>
    </div>
    <audio class="lazy" 
           data-src="podcast.mp3" 
           preload="none">
    </audio>
</div>
 
$('.audio-player').each(function() {
    var player = $(this);
    var audio = player.find('audio');
    var playBtn = player.find('.play-btn');
 
    playBtn.click(function() {
        if(!audio.attr('src')) {
            audio.attr('src', audio.data('src'));
        }
        audio[0].play();
        playBtn.text('⏸');
    });
});

<script class="lazy" 
        data-src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
        data-id="GA_MEASUREMENT_ID">
</script>
 
$('.lazy').Lazy({
    bind: 'scroll', // Или 'event' для отложенной загрузки
    delay: 2000,    // Задержка 2 секунды после первого скролла
    beforeLoad: function(element) {
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', element.data('id'));
    }
});

<div class="ad-container" style="min-height: 250px;">
    <div class="ad-placeholder text-center py-5">
        <p>Рекламный блок</p>
    </div>
    <div class="ad-content d-none">
        <script class="lazy-ad" 
                data-src="https://adserver.com/tag?zone=123">
        </script>
    </div>
</div>
 
$('.lazy-ad').Lazy({
    threshold: 300,
    afterLoad: function(element) {
        element.closest('.ad-content').removeClass('d-none');
        element.closest('.ad-placeholder').remove();
    }
});

<div class="carousel">
    <div class="slide">
        <img class="lazy" data-src="slide1.jpg" alt="Слайд 1">
    </div>
    <div class="slide">
        <img class="lazy" data-src="slide2.jpg" alt="Слайд 2">
    </div>
</div>
 
$('.carousel').slick({
    lazyLoad: 'ondemand',
    onInit: function() {
        $('.carousel .lazy').Lazy();
    },
    onAfterChange: function() {
        $('.slick-active .lazy').Lazy();
    }
});

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab">Главная</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab">Профиль</a>
    </li>
</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
    <div class="tab-pane fade lazy-tab" id="profile" role="tabpanel" data-src="profile-content.html"></div>
</div>
 
$('.lazy-tab').Lazy({
    bind: 'show.bs.tab',
    afterLoad: function(element) {
        var target = element.attr('id');
        $.get(element.data('src'), function(content) {
            $('#' + target).html(content);
        });
    }
});

<div class="lazy-iframe" data-src="https://youtube.com/embed/VIDEO_ID">
    <!-- SEO-friendly fallback content -->
    <div itemscope itemtype="http://schema.org/VideoObject">
        <h2 itemprop="name">Название видео</h2>
        <meta itemprop="description" content="Подробное описание видео контента">
        <meta itemprop="thumbnailUrl" content="thumbnail.jpg">
        <meta itemprop="uploadDate" content="2023-08-20">
        <a itemprop="contentUrl" href="transcript.html">Транскрипт видео</a>
    </div>
</div>

$('.lazy').Lazy({
    beforeLoad: function(element) {
        ga('send', 'event', 'LazyLoad', 'start', element.attr('data-src'));
    },
    afterLoad: function(element) {
        ga('send', 'event', 'LazyLoad', 'complete', element.attr('data-src'));
        // Проверка метрик производительности
        if(element.is('img')) {
            var loadTime = performance.now() - element.data('startTime');
            ga('send', 'timing', 'LazyLoad', 'imageLoad', loadTime);
        }
    },
    onError: function(element) {
        ga('send', 'event', 'LazyLoad', 'error', element.attr('data-src'));
        // Автоматическая замена на fallback
        if(element.is('img')) {
            element.attr('src', '/images/fallback.jpg');
        }
    }
});

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    $('.lazy').Lazy({
        threshold: 500,    // Увеличенный порог для мобильных
        scrollDirection: 'vertical',
        effectTime: 300,   // Более быстрая анимация
        enableThrottle: true,
        throttle: 150      // Оптимизация для touch-устройств
    });
} else {
    // Стандартные настройки для десктопа
    $('.lazy').Lazy({
        threshold: 200,
        effect: 'fadeIn',
        effectTime: 500
    });
}

<picture>
    <source class="lazy" data-srcset="image.webp" type="image/webp">
    <img class="lazy" data-src="image.jpg" alt="Описание">
</picture>
 
$('.lazy').Lazy({
    afterLoad: function(element) {
        if(element.is('source')) {
            element.parent('picture').find('img').attr('src', element.attr('data-srcset'));
        }
    }
});

$.Lazy.addType("custom-type", function(element, response) {
    // Ваша логика обработки
    var customData = element.data('custom');
    element.html('<div class="custom-content">' + customData + '</div>');
    response(true); // Указывает на успешную загрузку
});
 
// Использование
<div class="lazy" 
     data-type="custom-type" 
     data-custom="Динамический контент">
</div>

// Проверка загруженных элементов
console.log('Загружено изображений:', $('.lazy.loaded').length);
console.log('Осталось загрузить:', $('.lazy:not(.loaded)').length);
 
// Отладка событий
$('.lazy').on('lazy:loading', function() {
    console.log('Начата загрузка:', $(this).attr('data-src'));
}).on('lazy:loaded', function() {
    console.log('Загружено:', $(this).attr('src'));
}).on('lazy:error', function() {
    console.error('Ошибка загрузки:', $(this).attr('data-src'));
});