码迷,mamicode.com
首页 > 编程语言 > 详细

javascript页面滚动图片加载

时间:2015-01-20 21:51:58      阅读:248      评论:0      收藏:0      [点我收藏+]

标签:

    图片量越来越大,网页加载不堪重负。还是得用lazyload...

    实现要点:页面绑定滚动事件;加载页面的时候把地址放于一个属性中;在滚动过程中判断元素是否进入显示的区域内;加载图片。

    主要相关问题:浏览器兼容,如获取浏览器可见部分的宽度:

    window.innerHeight || document.documentElement.clientHeight

    获得页面相对可见部分的左上角的竖直方向的坐标:

    window.pageYOffset || window.document.documentElement.scrollTop

    获取页面元素的位置:

    element.getBoundingClientRect().top + window.document.documentElement.scrollTop + window.document.body.scrollTop

    图片加载:需要先把图片的真实地址放在图片元素的一个属性里面,真实的src存放一个很小的透明图片。在加载的时候,最好有个提示让用户可以清楚的看到图片在加载。

    使用jQuery,可以比较清晰的看到实现的思路:

$(window).scroll(function() {
    var _scrollTop = $(this).scrollTop();   //当前滚动条的位置
    $(‘img‘).each(function() {
        var _top = $(this).offset().top;    //这个img距离页面顶部的高度
        var _height = $(window).height();    //窗口高度
        if(_scrollTop + _height * 0.5 > _top) {    //当img的元素出现在窗口中央
            $(this).lazyload();
        }
    });
});

    原生JS:

var lazyLoad = (function (args) {
        var defaults = (arguments.length == 0) ? { src: ‘xxx‘, time: 100} : { src: args.src || ‘xxx‘, time: args.time ||100};
        var camelize = function (s) {
            return s.replace(/-(\w)/g, function (str, p1) {
                return p1.toUpperCase();
            });
        };
        this.getStyle = function (element, property) {
            if (arguments.length != 2) return false;
            var value = element.style[camelize(property)];
            if (!value) {
                if (document.defaultView && document.defaultView.getComputedStyle) {
                    var css = document.defaultView.getComputedStyle(element, null);
                    value = css ? css.getPropertyValue(property) : null;
                } else if (element.currentStyle) {
                    value = element.currentStyle[camelize(property)];
                }
            }
            return value == ‘auto‘ ? ‘‘ : value;
        };
        var _init = function () {
            var offsetPage = window.pageYOffset||window.document.documentElement.scrollTop,
                offsetWindow = offsetPage + Number(window.innerHeight ? window.innerHeight : document.documentElement.clientHeight),
                docImg = document.images,
                _len = docImg.length;
            if (!_len) return false;
            for (var i = 0; i < _len; i++) {
                var attrSrc = docImg[i].getAttribute(defaults.src),
                    o = docImg[i], tag = o.nodeName.toLowerCase();
                if (o) {
                    postPage = o.getBoundingClientRect().top + window.document.documentElement.scrollTop + window.document.body.scrollTop; postWindow = postPage + Number(this.getStyle(o, ‘height‘).replace(‘px‘, ‘‘));
                    if ((postPage > offsetPage && postPage < offsetWindow) || (postWindow > offsetPage && postWindow < offsetWindow)) {
                        if (tag === "img" && attrSrc !== null) {
                            o.setAttribute("src", attrSrc);
                        }
                        o = null;
                    }
                }
            };
            window.onscroll = function () {
                    _init();   
            };
        };
        return _init();
    });
    lazyLoad({
        src:"imgSrc",
        time:100
    });  

 

javascript页面滚动图片加载

标签:

原文地址:http://www.cnblogs.com/linda586586/p/4237184.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!