Технология "отложенной загрузки" изображений

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

IE11 поддерживает атрибут lazyload.

Некоторые другие браузера поддерживают атрибут loading="lazy".

<img src="image.jpg" loading="lazy" lazyload>

Для остальных браузеров будем "городить огород"...

Все изображения загружаются с атрибутом data-src, в котором содержится действительный адрес изображения. В сам же src прописывается однопиксельная картинка. При попадании картинки в зону видимости или при приближении к ней на 100 пикселей картинка загружается и атрибут data-src удаляется.

В интернете встречаются варианты скриптов, которые ставят атрибут display:none для картинок и потом скриптом меняют по мере загрузки или переносят имя картинки в дополнительный атрибут. Все эти варианты не работают, т.к. браузер загружает все картинки, найденные в HTML-коде до выполнения скриптов. Исключение составляет только Opera, которая не загружает картинки с атрибутом display:none.

Исходный код данного скрипта показан ниже.

Исходный код этого примера:

<style type="text/css">
    #gallery img { margin: 10px; display: block;}
</style>
<div id="gallery">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman1.gif" alt="Lazy load для изображений">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman3.gif" alt="Ленивая загрузка изображений">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman4.gif" alt="Отложенная загрузка изображений">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman5.gif" alt="Lazy load для изображений">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman6.gif" alt="Ленивая загрузка изображений">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman7.gif" alt="Отложенная загрузка изображений">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman8.gif" alt="Lazy load для изображений">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman9.gif" alt="Ленивая загрузка изображений">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman10.gif" alt="Отложенная загрузка изображений">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman11.gif" alt="Lazy load для изображений">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman12.gif" alt="Ленивая загрузка изображений">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman13.gif" alt="Отложенная загрузка изображений">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman14.gif" alt="Lazy load для изображений">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman15.gif" alt="Ленивая загрузка изображений">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman16.gif" alt="Отложенная загрузка изображений">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman17.gif" alt="Lazy load для изображений">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman18.gif" alt="Ленивая загрузка изображений">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman19.gif" alt="Отложенная загрузка изображений">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman20.gif" alt="Lazy load для изображений">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman21.gif" alt="Ленивая загрузка изображений">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman22.gif" alt="Отложенная загрузка изображений">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman23.gif" alt="Lazy load для изображений">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman24.gif" alt="Ленивая загрузка изображений">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman25.gif" alt="Отложенная загрузка изображений">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman26.gif" alt="Lazy load для изображений">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman27.gif" alt="Ленивая загрузка изображений">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman28.gif" alt="Отложенная загрузка изображений">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman29.gif" alt="Lazy load для изображений">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman30.gif" alt="Ленивая загрузка изображений">
</div>
<script>
    // ID родительского элемента
    var lazy_parent_id='gallery';

    function lazy_load_proc() {
        var doc = document.documentElement;
        var body = document.body;

        // Получить размеры видимой области страницы (кроссбраузерно)
        if (typeof(window.innerWidth) == 'number') {
            my_width = window.innerWidth;
            my_height = window.innerHeight;
        }
        else if (doc && (doc.clientWidth || doc.clientHeight)) {
            my_width = doc.clientWidth;
            my_height = doc.clientHeight;
        }
        else if (body && (body.clientWidth || body.clientHeight)) {
            my_width = body.clientWidth;
            my_height = body.clientHeight;
        }

        // Получить смещение страницы относительно ее верха
        if (doc.scrollTop) { dy=doc.scrollTop; } else { dy=body.scrollTop; }

        // Обработка всех картинок в контейнере
        var container=document.getElementById(lazy_parent_id);
        if (container) {
            var im=container.getElementsByTagName('img');
            for (var i=0; i<im.length; i++) {
                var el=im[i];
                var ds=el.getAttribute('data-src'); // Если атрибут data-src есть, то обработать картинку
                if (ds) {
                    // Получить координаты картинки от верха страницы
                    var coord=lazy_get_position(el);
                    // Если картинка попала в видимую область, то показать ее.
                    // Плюс берется запас в 100 пикселов для более плавной подгрузки
                    if (coord.y>(dy-my_height-100) && coord.y<(dy+my_height+100)) {
                        el.setAttribute('src',ds); // Прописать адрес исходной картинки
                        el.removeAttribute('data-src');  // Убрать атрибут data-src
                    }
                }
            }
        }
    }

    // Вспомогательная функция для определения координат элемента
    function lazy_get_position(element) {
        var offsetLeft=0;
        var offsetTop=0;
        do {
            offsetLeft+=element.offsetLeft;
            offsetTop+=element.offsetTop;
        }
        while (element=element.offsetParent);
        return {x:offsetLeft, y:offsetTop};
    }

    window.onscroll = lazy_load_proc;
    window.onresize = lazy_load_proc;
    lazy_load_proc(); // Сразу же показать картинки в видимой области
</script>

В данном примере использованы изображения из урока по графике corelDraw.