AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

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

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

Только Internet Explorer поддерживает атрибут lazyload:

<img src="image.jpg" lazyload>

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

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

Чтобы не дергалась страница, у картинок должны быть обязательно прописаны размеры width и height, тем паче, что это обязательно по HTML-стандарту.

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

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

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



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

    <div id="gallery">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman1.gif" width="300" height="419" alt="Фото 1">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman3.gif" width="310" height="421" alt="Фото 1">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman4.gif" width="334" height="449" alt="Фото 1">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman5.gif" width="346" height="446" alt="Фото 1">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman6.gif" width="338" height="446" alt="Фото 1">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman7.gif" width="139" height="161" alt="Фото 1">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman8.gif" width="252" height="286" alt="Фото 1">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman9.gif" width="239" height="355" alt="Фото 1">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman10.gif" width="179" height="283" alt="Фото 1">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman11.gif" width="196" height="278" alt="Фото 1">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman12.gif" width="191" height="275" alt="Фото 1">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman13.gif" width="174" height="271" alt="Фото 1">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman14.gif" width="82" height="49" alt="Фото 1">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman15.gif" width="176" height="276" alt="Фото 1">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman16.gif" width="102" height="89" alt="Фото 1">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman17.gif" width="106" height="109" alt="Фото 1">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman18.gif" width="183" height="101" alt="Фото 1">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman19.gif" width="172" height="295" alt="Фото 1">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman20.gif" width="170" height="296" alt="Фото 1">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman21.gif" width="171" height="309" alt="Фото 1">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman22.gif" width="178" height="302" alt="Фото 1">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman23.gif" width="110" height="96" alt="Фото 1">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman24.gif" width="224" height="321" alt="Фото 1">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman25.gif" width="189" height="291" alt="Фото 1">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman26.gif" width="190" height="300" alt="Фото 1">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman27.gif" width="185" height="293" alt="Фото 1">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman28.gif" width="170" height="309" alt="Фото 1">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman29.gif" width="170" height="304" alt="Фото 1">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/pic/corel/snowman30.gif" width="167" height="305" alt="Фото 1">
    </div>

<script type="text/javascript">
    // 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'); // Если атрибут lazy есть, то обработать картинку
                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); // Прописать адрес исходной картинки и убрать атрибут lazy
                        el.lazy='';
                    }
                }
            }
        }
    }

    // Вспомогательная функция для определения координат элемента
    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>


.

© Copyright 2008- by KDG



Rambler's Top100