图片懒加载的实现

全栈程序员-站长 • 2026年3月19日上午11:28 • 未分类 • 阅读 2

1. dataset

HTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放。dataset自定义属性的格式：data-xx；前面的data-是固定的，后面的xx一般为表示与自定义属性相关的字符串。img标签中的data-src属性就属于一种自定义的dataset属性。
举个例子：

 
  
    dinner

而当我们想要获取这个属性时：

var today = document.getElementById('today'); var typeOfFood = today.dataset.food;

参考文献：https://www.zhangxinxu.com/wordpress/2011/06/html5自定义属性对象dataset简介/

2. 懒加载

页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。所以懒加载基本的原理就是用dataset自定义属性取代src存储图片的路径，然后在检测到图片进入到可视区域的时候，再将其换为src。那我们就来基本实现一下吧。

基本布局
首先将所有图片的src换为自定义属性data-src，这个时候图片是不显示的：

 
   
   懒加载

判断条件
window.innerHeight 可以获取到这个窗口的高度(不包括工具栏和滚动条)。getBoundingClientRect()方法用来获取页面中某个元素的左、上、右、下分别相对浏览器视窗的位置，返回的是一个矩形对象，包括四个属性，分别是left 、top、right、bottom。分别表示元素各边与页面上边和左边的距离。
基本的判断就是如果该图片距离窗口上方的位置小于窗口的高度（也就是说该图片已经进入了窗口），那么就将该图片的src属性赋为data-src找那个存的图片路径。
然后全局绑定scroll事件，在滚动页面的时候，图片进入到窗口后，500ms之后才会显示出图片。