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

Автоподгрузка картинок по мере прокрутки страницы.

Все картинки задаете в формате однопиксельной картинки, куальную картинку задаете в data-src:

<img src="1.gif" width="128" height="128" data-src="yozhik.jpg">

  <script>
    /**
    * Проверяет элемент на попадание в видимую часть экрана.
    * Для попадания достаточно, чтобы верхняя или нижняя границы элемента были видны.
    */
    function isVisible(elem) {

    var coords = elem.getBoundingClientRect();

    var windowHeight = document.documentElement.clientHeight;



    // верхняя граница elem в пределах видимости ИЛИ нижняя граница видима
    var topVisible = coords.top > 0 && coords.top < windowHeight;
    var bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;

/*
     Вариант проверки, считающий элемент видимым,
     если он не более чем -1 страница назад или +1 страница вперед
        var extendedTop = -windowHeight;
        var extendedBottom = 2 * windowHeight;

        // top visible || bottom visible
        var topVisible = coords.top > extendedTop && coords.top < extendedBottom;
        var bottomVisible = coords.bottom < extendedBottom && coords.bottom > extendedTop;
*/
        return topVisible || bottomVisible;
    }

    function showVisible() {
        var imgs = document.getElementsByTagName('img');
        for (var i = 0; i < imgs.length; i++) {

            var img = imgs[i];

            var src = img.getAttribute('data-src');
            if (!src) continue;

            if (isVisible(img)) {
                img.src = src;
                img.setAttribute('data-src', '');
            }
        }
    }

    window.onscroll = showVisible;
    showVisible();
  </script>

.

© Copyright 2008- by KDG



Rambler's Top100