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

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

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

 <img src="1.gif" data-src="yozhik.jpg" alt="Ёжик">

<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>