总是听说图片懒加载,那你能讲清楚吗?(一)

引言

图片懒加载是一种优化网页性能的技术,它可以在网页加载时只加载当前屏幕可视区域内的图片,而不会一次性加载所有图片,从而提高网页的加载速度、减少后台服务器压力,并提升用户体验。让我来详细介绍一下图片懒加载的原理及实现方法。

一、原理

实现图片懒加载的原理可以简单概括为以下几个步骤:

1. 将图片地址存储到 data-xxx 属性上

在 HTML 的 img 标签中,我们可以使用自定义的 data-xxx 属性来存储图片地址,例如:

html 复制代码
<img src="placeholder.jpg" data-src="image.jpg">  

这样,我们就可以在图片加载时通过 JavaScript 获取到图片地址。

2. 判断图片是否在可视区域

通过计算每张图片的位置,我们可以判断当前图片是否在可视区域内。一般来说,我们可以通过以下两个方法来计算图片的位置:

(1) getBoundingClientRect() 方法

这个方法可以获取元素的大小、位置等信息,包括元素相对于视口的位置。通过计算元素的 top、bottom、left、right 等属性可以得出元素的位置信息,例如:

javascript 复制代码
const rect = element.getBoundingClientRect();  
const top = rect.top;  
const bottom = rect.bottom;  
const left = rect.left;  
const right = rect.right;  

(2) offsetTop 和 offsetHeight 属性

这两个属性可以获取元素相对于其父元素的位置和大小。通过计算元素的 offsetTop 和 offsetHeight 属性可以得出元素的位置信息,例如:

javascript 复制代码
const top = element.offsetTop;  
const height = element.offsetHeight;  
const bottom = top + height;  

3. 如果在,就设置图片 src

当图片在可视区域内时,我们就可以将 data-src 属性的值赋给 img 标签的 src 属性,从而开始加载图片。例如:

javascript 复制代码
if (isInViewport(image)) {  
  image.src = image.dataset.src;  
}  

4. 绑定 scroll 监听事件

为了实现图片懒加载,我们需要监听页面的滚动事件,当滚动时判断图片是否在可视区域内,如果在就加载图片。例如:

javascript 复制代码
window.addEventListener('scroll', function() {  
  images.forEach(function(image) {  
    if (isInViewport(image)) {  
      image.src = image.dataset.src;  
    }  
  });  
});  

二、实现方法

基于上述原理,我们就可以实现图片懒加载的功能。下面是一个简单的实现方法:

html 复制代码
<img src="placeholder.jpg" data-src="image.jpg">  
<img src="placeholder.jpg" data-src="image2.jpg">  
<img src="placeholder.jpg" data-src="image3.jpg">  
   
<script>  
  const images = document.querySelectorAll('img[data-src]');  
  
  function isInViewport(element) {  
    const rect = element.getBoundingClientRect();  
    return rect.bottom > 0 &&  
           rect.right > 0 &&  
           rect.left < (window.innerWidth || document.documentElement.clientWidth) &&  
           rect.top < (window.innerHeight || document.documentElement.clientHeight);  
  }  
  
  function lazyLoad() {  
    images.forEach(function(image) {  
      if (isInViewport(image)) {  
        image.src = image.dataset.src;  
        image.removeAttribute('data-src');  
      }  
    });  
  }  
  
  window.addEventListener('scroll', lazyLoad);  
  window.addEventListener('resize', lazyLoad);  
  window.addEventListener('orientationchange', lazyLoad);  
  
  lazyLoad();  
</script>  

在上面的代码中,我们首先通过 querySelectorAll() 方法获取所有带有 data-src 属性的 img 标签,然后定义了一个 isInViewport() 函数,用于判断元素是否在可视区域内。在 lazyLoad() 函数中,我们遍历所有带有 data-src 属性的 img 标签,如果它们在可视区域内,就将 data-src属性的值赋给src属性,并将data-src 属性删除,从而开始加载图片。最后,我们将 lazyLoad() 函数绑定到 window 对象scrollresizeorientationchange事件上,以便在窗口大小或方向变化时重新计算图片位置。

三、总结

图片懒加载是一种优化网页性能的技术,它可以在网页加载时只加载当前屏幕可视区域内的图片,从而提高网页的加载速度、减少后台服务器压力,并提升用户体验。

实现图片懒加载的原理可以简单概括为以下几个步骤:将图片地址存储,判断图片是否在可视区域,如果在就绑定监听事件。我们可以通过计算图片的位置来判断它是否在可视区域内,在实现图片懒加载时,我们可以遍历并判断是否在可视区域内,然后开始加载图片,最后计算图片位置。

还有一些优化可以进一步提高图片懒加载的效率和性能,我们在下一篇文章中再来向大家介绍它们。

那么这篇文章就到这里结束啦~

如果你想了解更多这类文章,点赞关注作者更新更多~

相关推荐
Martin -Tang13 分钟前
vite和webpack的区别
前端·webpack·node.js·vite
迷途小码农零零发14 分钟前
解锁微前端的优秀库
前端
王解1 小时前
webpack loader全解析,从入门到精通(10)
前端·webpack·node.js
我不当帕鲁谁当帕鲁1 小时前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段
前端·javascript·arcgis
那一抹阳光多灿烂1 小时前
工程化实战内功修炼测试题
前端·javascript
放逐者-保持本心,方可放逐2 小时前
微信小程序=》基础=》常见问题=》性能总结
前端·微信小程序·小程序·前端框架
毋若成4 小时前
前端三大组件之CSS,三大选择器,游戏网页仿写
前端·css
红中马喽4 小时前
JS学习日记(webAPI—DOM)
开发语言·前端·javascript·笔记·vscode·学习
Black蜡笔小新5 小时前
网页直播/点播播放器EasyPlayer.js播放器OffscreenCanvas这个特性是否需要特殊的环境和硬件支持
前端·javascript·html
秦jh_6 小时前
【Linux】多线程(概念,控制)
linux·运维·前端