美文网首页
手写懒加载方法

手写懒加载方法

作者: 我没叫阿 | 来源:发表于2023-06-15 14:22 被阅读0次
    // 获取有几个标签
    let num = document.getElementsByTagName('img').length  
    // 获取标签
    let img = document.getElementsByTagName('img')  
    // 获取img标签的原本src的值
    let imgUrl = './images/loading.gif'
    // 定义一个数,为了防止之前加载过的图片重复加载
    let n = 0

    lazyLoad()
    // 页面滚动调用懒加载方法
    window.onscroll = lazyLoad  

    // 懒加载方法
    function lazyLoad() {
        // 获取设别屏幕高度
        let seeHeight = document.documentElement.clientHeight  
        // 滚动条滚动的距离
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop   

        for (let i = n; i < num; i++) {
            if (img[i].offsetTop < seeHeight + scrollTop) {
                if (img[i].getAttribute('src') === imgUrl) {
                    // 把data-src里存储的真实图片地址赋值给rc
                    img[i].src = img[i].getAttribute('data-src')
                }
                n = i + 1
            }
        }

    }

相关文章

  • iOS开发,懒加载

    什么是懒加载? 懒加载--比较懒的加载方式,需要的时候才加载,也称为延时加载。 所谓懒加载既是重写get方法,一定...

  • 懒加载图片的实现及其原理

    懒加载的基本 懒加载--也叫延时加载,即在需要的时候才加载(效率低,占用内存小)。所谓懒加载,写的是其get方法:...

  • 懒加载

    1.懒加载基本懒加载——也称为延迟加载,即在需要的时候才加载(效率低,占用内存小)。所谓懒加载,写的是其get方法...

  • 懒加载

    1.懒加载基本懒加载——也称为延迟加载,即在需要的时候才加载(效率低,占用内存小)。所谓懒加载,写的是其get方法...

  • OC中对懒加载的理解

    懒加载 本质是重写getter方法; 用到时候再加载,而且只加载一次; 代码实例 懒加载的好处 懒加载体现了OC的...

  • vue中组件懒加载

    vue中组件懒加载的方法 1.异步实现路由懒加载 2.import(推荐使用这种方式) 同理,路由懒加载和组件懒加...

  • Swift:)懒加载Lazy

    OC中,要实现懒加载是用到getter方法,例如 Swift懒加载差别就很大了,懒加载属性用lazy修饰,注意结尾...

  • 在UItableview上添加悬浮按钮

    //设置代理方法 //懒加载button

  • swift 中 Lazy,deinit用法

    * swift中懒加载写法,懒加载在Swift中是一个闭包。 懒加载详细介绍看这里 * OC中的dealloc方法...

  • Swift中的懒加载

    在OC中写代码时,为了节省内存的占用,我们常常用到懒加载,现在转手写Swift用到懒加载,语法和OC还有些许出入,...

网友评论

      本文标题:手写懒加载方法

      本文链接:https://www.haomeiwen.com/subject/zvrlydtx.html