懒加载

 懒加载就是延时加载,当图片出现在可视区域时才进行加载,这样可以优化界面,加快页面初始加载速度。

首先需要了解元素偏移量,可视高度等概念,如下图。

在这里插入图片描述

 大概的意思就是:当(Element)的offsetTop = (document.documentElement)对象的clientHeight + scrollTop时,用data-src属性的值替代src。

 见如下写法

<img src="loading.gif" data-src="back.png" alt="back" />
​
const imgElement = document.querySelectorAll('img)
let index = 0

function lazyLoad () {
  for (let i = index; i < imgElement.length; i++) {
    if (imgElement[i].offsetTop < document.documentElement) {
      const dataSrc =  imgElement.getAttribute('data-src')
      imgElement[i].setAttribute('src', dataSrc)
      index = i
    }
  }
}

lazyLoad()

window.onScroll = lazyLoad

​

 上面这种写法只是粗略地展示了懒加载的写法,每次onScoll都会调用一次函数非常不合理,可以加上节流进行优化。详见节流与防抖博文。

 

参考:https://www.jianshu.com/p/dcf73ad5ebed

发布了39 篇原创文章 · 获赞 51 · 访问量 9053
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览