懒加载的基本原理与实现

懒加载其实就是延时加载，即当对象需要用到的时候再去加载。

懒加载的优点：

1. 不需要将对象的实例化全部写到viewDidLoad中，可以简化代码，增强代码的可读性

2. 对象的实例化在getter方法中，各司其职，降低耦合性

3. 对系统的内存占用率会减少；

基本原理：

一张图片就是一个<img>标签，浏览器是否发起请求图片是根据<img>的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给<img>的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。

原理如下图：当图片还没有进入可视区时，图片不加载，图片一旦进入可视区，图片开始加载

实现效果：

实现懒加载有四个步骤，如下：
1.加载loading图片
2.判断哪些图片要加载；
3.隐形加载图片
4.替换真图片

当前图片到顶部的距离 <= 滚动距离 + 可视区的高度。
当一个元素出现在我们眼前 小于 窗口高度 加上窗口滚动的高度的时候 就意味着 到达目标点 可以开始加载图片 或者其他内容

实现效果的js代码：

     // 所有的图片
        var aImage = document.getElementsByTagName('img');
        // 可视区的高度
        var height  = document.documentElement.clientHeight;
        // 滚动时触发
        window.onscroll = function(){
               loadMore()
        }

        function loadMore(){
            var scrollTop = document.documentElement.scrollTop;
                // 遍历所有的图片，看那需要显示，哪些不需要显示
                for(var i = 0; i < aImage.length;i++){
                    var top = aImage[i].offsetTop;
                    
                    // 根据滚动距离 、 可视区的高度、图片距离顶部的距离
                    // 判断当前是否需要显示
                    if(top <=  height + scrollTop){
                        aImage[i].src = aImage[i].getAttribute('_src');
                    }
                }
        }