0
点赞
收藏
分享

微信扫一扫

网站优化之必会技——图片懒加载

GG_lyf 2022-03-30 阅读 74
html5

图片懒加载,顾名思义,就是当需要用图片的时候才加载图片,即看到图片才加载图片(可以理解为图片的动态加载),因此问题可以从两个方面分析:

  • 图片加载方式
  • 图片加载时机

1. 图片加载方式

图片加载方式主要分浏览器实现(lazyloading属性)和开发人员实现(dataset属性)

1.1 使用LazyLoading 属性

浏览器觉得懒加载这事可以交给自己做,你们开发者加个属性就好了。实在是…!

<img src="shanyue.jpg" loading="lazy" />

优点:

  • 不需要开发者控制图片加载时机

缺点:

  • 整个过程对于开发者来说是一个空盒子,无法做更进一步的优化。

  • 浏览器的兼容性比较差,不推荐使用

1.2 使用DataSet 属性

dataset属性是HTML5提供的一种功能,可以在标准内于HTML元素中存储额外的信息——即给元素添加自定义的数据,且不会作用要页面渲染上。

使用方法:

  1. 在元素上通过data-*设置属性信息,其中*为自定义的数据名

    <img src=""  data-image="shanyue.jpg"/>
    
  2. 通过getAttribute获取属性信息

    let imageObj = document.querySelector("img"),
        trueImg = imageObj.getAttribute("data-image");
    imageObj.src = trueImg;
    imageObj.onload = function(){
        imageObj['style']['opacity'] = 1; // 保证没有加载完成时,就仅显示占位;加载完成后,将占位隐藏
    };
    imgObj.removeAttribute['data-image']
    

优点:

  • 整个过程开发可以控制
  • 兼容性好

缺点:

  • 需要开发者自己控制图片加载时机

2. 图片加载时机

2.1 滚动事件+盒子模型

动态: 通过滚动事件来处理

加载:通过 clientHeight + scrollTop >= offsetTop来触发

优化:节流(throttle)

在这里插入图片描述

2.2 滚动事件+getBoundingClientRect()

提升点:提供API直接获取元素相对于视窗的位置(兼容性挺好的,Chrome2,IE4)

动态: 通过滚动事件来处理

加载:通过 getBoundingClientRect.top <= window.innerHeight来触发

优化: 节流(throttle)
在这里插入图片描述

2.3 IntersectionObserver

提升点:将滚动事件+获取元素相对于视窗的位置+节流三部分整合起来(兼容性较差,IE不支持,Chrome51+)

使用步骤:

  1. 创建intersectionObserver对象: var observer = new IntersectionObserver(cb, {threshold: [0.5]})
    • cb:回调函数,通过其中的参数(changes)获取所有监听对象的状态
    • threshold: 阈值,如上,当显示50%的时候触发对象改变
  2. 监听图片对象或其他对象: observer.observe(obj)
  3. 移除监听: observer.unobserve(obj)
举报

相关推荐

0 条评论