是否应该用javascript实现这个效果

一个网页内容很多，要用浏览器的卷滚条往下翻才能看全，里面很多图片，为了提高网页加载速度，希望一开始并不将所有图片加载上，等卷滚条翻到那时才加载，我感觉应该用javascript监控卷滚条事件，但是没有查到怎样实现，而且也不知道怎样判断某个图片是否已经进入可视范围。请高手支招！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

就是动态引入图片就可以了，到时候就加载路径，就是动态引入src就可以
图片预加载<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片延时加载方法</title>
<style type="text/css">
div {border:1px solid red; height:100px; margin-bottom:100px; overflow:hidden;}
div img {border:1px solid #fff;}
</style>
</head>
<body>
<div>
<img name="page_cnt_1" _src="http://img1.gtimg.com/news/pics/24812/24812858.jpg"/>
</div>

<div>
<img name="page_cnt_1" _src="http://img1.gtimg.com/news/pics/24878/24878261.jpg"/>
</div>

<div>
<img name="page_cnt_1" _src="http://img1.gtimg.com/news/pics/24820/24820424.jpg" />
</div>

<div>
<img name="page_cnt_1" _src="http://img1.gtimg.com/news/pics/24816/24816081.jpg" />
</div>

<div>
<img name="page_cnt_1" _src="http://img1.gtimg.com/news/pics/24829/24829717.jpg" />
</div>
<div>
<img name="page_cnt_2" _src="http://img1.gtimg.com/news/pics/24813/24813042.jpg" />
</div>

<div>
<img name="page_cnt_2" _src="http://img1.gtimg.com/sports/pics/24806/24806697.jpg" />
</div>

<div>
<img name="page_cnt_2" _src="http://img1.gtimg.com/news/pics/24699/24699989.jpg" />
</div>

<div>
<img name="page_cnt_2" _src="http://img1.gtimg.com/news/pics/24699/24699983.jpg" />
</div>

<div>
<img name="page_cnt_2" _src="http://img1.gtimg.com/news/pics/24699/24699985.jpg" />
</div>

<div>
<img name="page_cnt_3" _src="http://img1.gtimg.com/news/pics/24870/24870946.jpg" />
</div>

<div>
<img name="page_cnt_3" _src="http://img1.gtimg.com/news/pics/24763/24763773.jpg" />
</div>

<div>
<img name="page_cnt_3" _src="http://img1.gtimg.com/news/pics/22878/22878740.jpg" />
</div>

<div>
<img name="page_cnt_3" _src="http://img1.gtimg.com/news/pics/24805/24805043.jpg" />
</div>

<div>
<img name="page_cnt_3" _src="http://img1.gtimg.com/news/pics/24807/24807597.jpg" />
</div>

<div>
<img name="page_cnt_4" _src="http://img1.gtimg.com/news/pics/24827/24827939.jpg" />
</div>

<script type="text/javascript">
!(function(){
    var th = this;
    th.pageSize = 1000;/* 每屏大概高度为1000px */
    th.pageQuotiety = 0.5;/* 提前下载量 */
    th.imgName = "page_cnt_";/* 图片通用名 */
    th.imgs = [];/* 每屏图片 [每屏所有图片，第一张图片，第一张图片绝对top:加载图片的top] */

    var B = {};/* Browser check */
    B.ua = window.navigator.userAgent.toLowerCase();
    B.ie = /msie/.test(B.ua);
    B.moz = /gecko/.test(B.ua);
    B.opera = /opera/.test(B.ua);
    B.safari = /safari/.test(B.ua);

    var $N = function(s, docu){
        var doc = docu ? docu : document;
        return (typeof s == "object") ? s : doc.getElementsByName(s);
    };
    th.getWindowSize = function(){
        var a = {};
        if (window.self && self.innerWidth) {
            a.width = self.innerWidth;
            a.height = self.innerHeight;
            return a;
        }
        if (document.documentElement && document.documentElement.clientHeight) {
            a.width = document.documentElement.clientWidth;
            a.height = document.documentElement.clientHeight;
            return a;
        }
        a.width = document.body.clientWidth;
        a.height = document.body.clientHeight;
        return a;
    }
    th.getObjPosition = function(obj){
        var a = {};
        a.x = obj.offsetLeft, a.y = obj.offsetTop;
        while (obj = obj.offsetParent) {
            a.x += obj.offsetLeft;
            a.y += obj.offsetTop;
        }
        return a;
    }
    th._getPageScroll = function(){
        var s;
        if (typeof(window.pageYOffset) != "undefined") {
            s = window.pageYOffset;
        }
        else
            if (document.documentElement && document.documentElement.scrollTop) {
                s = document.documentElement.scrollTop;
            }
else
if (document.body) {
                s = document.body.scrollTop;
            }
        return s;
    }
    th._loadImages = function(a){
        if (!a)
            return;
        var obj = a;
        if (typeof a == "string") {
            obj = $N(a);
        }
        for (var i = 0; i < obj.length; i++) {
            var s = obj[i];
            if (typeof s == "object") {
                if (s.getAttribute("_src")) {
                    s.setAttribute("src", s.getAttribute("_src"));
                    s.removeAttribute("_src", 0);
                }
            }
        }
        delete obj;
        obj = null;
    }
    th._loadAllImgs = function(){
        var i = 0;
        while (th.imgs[i]) {
            th._loadImages(th.imgs[i][0]);
            i++;
        }
    }
    th.getImgPosition = function(){
        var i = 1;
        var p = $N(th.imgName + i);
        while (p && p.length > 0) {
            var p = $N("page_cnt_" + i);
            var t = th.getImgLoadPosition(p[0]);
            th.imgs.push([p, p[0], t]);
            i++;
            p = $N(th.imgName + i);
        }
    }
    th.getImgLoadPosition = function(a){
        var t = {
            imgTop: 0,
            pageTop: 0
        };
        if (a) {
            var w = th.getWindowSize();
            t.imgTop = parseInt(th.getObjPosition(a).y);
            t.pageTop = parseInt((t.imgTop / 1000 - th.pageQuotiety) * 1000,10);
        }
        return t;
    }
    th._addScrollEven = function(){
        if (B.ie) {
            window.attachEvent("onscroll", th._scrollFn);
        }
        else {
            window.addEventListener("scroll", th._scrollFn, false);
        }
    }
    th._removeScrollEven = function(){
        if (B.ie) {
            window.detachEvent("onscroll", th._scrollFn);
        }
        else {
            window.removeEventListener("scroll", th._scrollFn, false);
        }
    }
    th._scrollFn = function(){
        var y = th._getPageScroll();
        var w = th.getWindowSize().height;
        if (w == 0) {
            th._loadAllImgs();
            return;
        }
        var i = 0;
        var j = 0;
        while (th.imgs[i]) {
            if (!(y + w < th.imgs[i][2].pageTop)) {
                th._loadImages(th.imgs[i][0]);
                j++
            }
            i++;
            if (j >= th.imgs.length) {
                th._removeScrollEven();
            }
        }
    }
    th.getImgPosition();
    th._addScrollEven();
    th._scrollFn();
})();
</script>
</body>
</html>
懒加载，http://blog.163.com/zhangfei_jiayou/blog/static/56244178200983061319248/