懒加载

发表于 | | 阅读量

  1. 在html中给img指定两个图片资源

    1
    <img src="default.jpg" dataSrc="img.jpg">

  2. lazyload函数

核心在于当满足了img.offset < scrolllTop + window.innerHeight的时候，替换img的 src

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var imgs = document.getElementsByTagName('img');
    function lazyload(){
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        var viewportSize = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        var len = imgs.length;
        var i , n = 0;
        for(i = n; i < len; i++){
            var offsetTop = imgs[i].offsetTop;
            if(offsetTop < scrollTop + viewportSize){//显示真正的图片
                imgs[i].src = imgs[i].getAttribute('dataSrc');
            }
            n = i + 1;//避免每次for循环都是从0开始
        }
    }

  1. 优化：将lazyload函数绑定在window的onscroll事件中
    window.onscroll = throttle(lazyload, 500, 1000);
  2. 优化
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    /**
         *
         * @param fun 要执行的函数
         * @param delay 延时的时间
         * @param time 在time内执行一次
         */
        function throttle(fun, delay, time) {
            var timeout, startTime = new Date();
            return function(){
                var context = this,
                        args = arguments,
                        curTime = new Date();
                clearTimeout(timeout);
                //如果到达了触发时间
                if(curTime - startTime >= time){
                    fun.apply(context, args);
                    startTime = curTime;
                }
                else {//没到达触发时间，重新设置定时器
                    timeout = setTimeout(fun, delay);
                }
            }
        }
        lazyload();//至少执行一次
        window.onscroll = throttle(lazyload, 500, 1000);