图片懒加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img {
            height: 300px;
        }
    </style>
</head>
<body>
<div class="container">
    <header>
        <h1>图片懒加载</h1>
    </header>
    <div>
        <pre>
        12、网站性能优化
        13、解释平衡二叉树，以及在数据结构中的应用（红黑树）
        14、快排的时间复杂度和空间复杂度。
        一面问的基础知识很多，但是基本都答出来了，面完后有些蒙逼。
        二面是一位女面试官，给的压力很大，人比较严肃，不苟言笑，后来听说二面是压力面，二面问了50分钟。
        1、手写一个jQuery插件
        2、在jquery方法和原型上面添加方法的区别和实现（$.extend,$.fn.extend），以及jquery对象的实现（return
        new jQuery.fn.init）
        3、手写一个递归函数（考察arguments.callee，以及arguments的解释）
        4、对前端路由的理解？前后端路由的区别？
        5、介绍一下webpack和gulp，以及项目中具体的使用
        6、你对es6的了解
        </pre>
        ![](images/1.jpg)
    </div>
    <div>
        <pre>
        12、网站性能优化
        13、解释平衡二叉树，以及在数据结构中的应用（红黑树）
        14、快排的时间复杂度和空间复杂度。
        一面问的基础知识很多，但是基本都答出来了，面完后有些蒙逼。
        二面是一位女面试官，给的压力很大，人比较严肃，不苟言笑，后来听说二面是压力面，二面问了50分钟。
        1、手写一个jQuery插件
        2、在jquery方法和原型上面添加方法的区别和实现（$.extend,$.fn.extend），以及jquery对象的实现（return
        new jQuery.fn.init）
        3、手写一个递归函数（考察arguments.callee，以及arguments的解释）
        4、对前端路由的理解？前后端路由的区别？
        5、介绍一下webpack和gulp，以及项目中具体的使用
        6、你对es6的了解
        </pre>
        ![](border.png)
    </div>
    <div>
        <pre>
        12、网站性能优化
        13、解释平衡二叉树，以及在数据结构中的应用（红黑树）
        14、快排的时间复杂度和空间复杂度。
        一面问的基础知识很多，但是基本都答出来了，面完后有些蒙逼。
        二面是一位女面试官，给的压力很大，人比较严肃，不苟言笑，后来听说二面是压力面，二面问了50分钟。
        1、手写一个jQuery插件
        2、在jquery方法和原型上面添加方法的区别和实现（$.extend,$.fn.extend），以及jquery对象的实现（return
        new jQuery.fn.init）
        3、手写一个递归函数（考察arguments.callee，以及arguments的解释）
        4、对前端路由的理解？前后端路由的区别？
        5、介绍一下webpack和gulp，以及项目中具体的使用
        6、你对es6的了解
        </pre>
        ![](images/2.jpg)
    </div>
    <div>
        <pre>
        12、网站性能优化
        13、解释平衡二叉树，以及在数据结构中的应用（红黑树）
        14、快排的时间复杂度和空间复杂度。
        一面问的基础知识很多，但是基本都答出来了，面完后有些蒙逼。
        二面是一位女面试官，给的压力很大，人比较严肃，不苟言笑，后来听说二面是压力面，二面问了50分钟。
        1、手写一个jQuery插件
        2、在jquery方法和原型上面添加方法的区别和实现（$.extend,$.fn.extend），以及jquery对象的实现（return
        new jQuery.fn.init）
        3、手写一个递归函数（考察arguments.callee，以及arguments的解释）
        4、对前端路由的理解？前后端路由的区别？
        5、介绍一下webpack和gulp，以及项目中具体的使用
        6、你对es6的了解
        </pre>
        ![](images/3.jpg)
        <br>
        <pre>
        12、网站性能优化
        13、解释平衡二叉树，以及在数据结构中的应用（红黑树）
        14、快排的时间复杂度和空间复杂度。
        一面问的基础知识很多，但是基本都答出来了，面完后有些蒙逼。
        二面是一位女面试官，给的压力很大，人比较严肃，不苟言笑，后来听说二面是压力面，二面问了50分钟。
        1、手写一个jQuery插件
        2、在jquery方法和原型上面添加方法的区别和实现（$.extend,$.fn.extend），以及jquery对象的实现（return
        new jQuery.fn.init）
        3、手写一个递归函数（考察arguments.callee，以及arguments的解释）
        4、对前端路由的理解？前后端路由的区别？
        5、介绍一下webpack和gulp，以及项目中具体的使用
        6、你对es6的了解
        </pre>
        ![](images/4.jpg)
    </div>
</div>
<script>
    //将获取的图片类数组转化为数组形式
    var images = Array.prototype.slice.call(document.getElementsByTagName('img'));
    console.log(images);

    //获取浏览器视口高度
    var viewHeight = document.documentElement.clientHeight;

    window.addEventListener('scroll', function () {
            var i, length = images.length;
            for (i = 0; i < length; i++) {
                if (images[i].getBoundingClientRect().top < viewHeight) {
                    setTimeout((function (i) {
                        return function () {
                            images[i].setAttribute('src', images[i].dataset.src);
                            images.splice(i, 1)
                        }
                    })(i));
                }
            }
        }
    )
</script>
</body>
</html>
图片懒加载

推荐阅读更多精彩内容
