欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

懒加载的基本原理与实现

程序员文章站 2022-04-18 12:46:57
...

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

懒加载的优点:

  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');
                    }
                }
        }