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

引言

在上一篇文章中我们了解了一下图片懒加载以及它的实现原理,图片懒加载是一种优化网页性能的技术,它可以在网页加载时只加载当前屏幕可视区域内的图片,而不会一次性加载所有图片,从而提高网页的加载速度、减少后台服务器压力,并提升用户体验。在这篇文章里我们再来一起了解一些可以进一步提高图片懒加载的效率和性能的优化方法。

一、使用 Intersection Observer API

Intersection Observer API是浏览器提供的一种监听元素可见性的方法,它可以在元素进入或离开可视区域时触发回调函数。使用Intersection Observer API可以省去计算元素位置的步骤,并且可以提高性能。

使用 Intersection Observer API 可以简化代码,例如:

javascript 复制代码
const observer = new IntersectionObserver(function(entries) {  
  entries.forEach(function(entry) {  
    if (entry.isIntersecting) {  
      const image = entry.target;  
      image.src = image.dataset.src;  
      observer.unobserve(image);  
    }  
  });  
});  
   
images.forEach(function(image) {  
  observer.observe(image);  
});  

在上面的代码中,我们首先创建了一个IntersectionObserver对象,并传入了一个回调函数。在回调函数中,我们遍历所有的entries,判断是否在可视区域内,如果是,就将 data-src 属性的值赋给src属性,并调用unobserve()方法停止观察该元素。最后,我们遍历所有带有data-src属性的img标签,并调用observe()方法观察它们。

二、设置阈值

设置阈值可以控制元素何时被视为"可见",从而进一步优化图片懒加载的效率。例如:

javascript 复制代码
const options = {  
  root: null,  
  rootMargin: '0px',  
  threshold: 0.5  
};  
   
const observer = new IntersectionObserver(function(entries) {  
  entries.forEach(function(entry) {  
    if (entry.isIntersecting) {  
      const image = entry.target;  
      image.src = image.dataset.src;  
      observer.unobserve(image);  
    }  
  });  
}, options);  

在上面的代码中,我们使用options对象设置了threshold属性为0.5,表示当元素的一半进入可视区域时就被视为"可见"。可以根据实际情况调整threshold属性的值,以实现更加精细的控制。

三、预加载图片

预加载图片可以进一步提高用户体验,例如在鼠标悬停或点击事件时预加载图片。例如:

javascript 复制代码
images.forEach(function(image) {  
  const src = image.dataset.src;  
  const img = new Image();  
  img.src = src;  
  img.onload = function() {  
    image.src = src;  
  };  
});  

在上面的代码中,我们通过创建一个新的Image对象来预加载图片,然后在图片加载完成后将其赋给img标签的src属性。这样可以加快图片加载速度,从而提高用户体验。

四、懒加载非图片资源

除了图片,还有其他类型的资源也可以使用懒加载技术,例如视频音频IFrame 等。对于这些资源,我们可以使用类似于图片懒加载的方法来实现懒加载。

1. 视频和音频懒加载

对于视频和音频,我们可以使用 HTML5 的videoaudio标签来实现懒加载。我们可以将视频或音频文件的地址存储到data-src属性上,然后在用户触发播放事件时再加载资源。例如:

html 复制代码
<video controls data-src="video.mp4"></video>  
   
<script>  
  const videos = document.querySelectorAll('video[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() {  
    videos.forEach(function(video) {  
      if (isInViewport(video)) {  
        video.src = video.dataset.src;  
        video.removeAttribute('data-src');  
      }  
    });  
  }  
  
  window.addEventListener('scroll', lazyLoad);  
  window.addEventListener('resize', lazyLoad);  
  window.addEventListener('orientationchange', lazyLoad);  
  
  lazyLoad();  
</script>  

在上面的代码中,我们首先获取所有带有data-src属性的video标签,然后使用 isInViewport() 函数判断元素是否在可视区域内,如果是,就将data-src属性的值赋给src属性,并将data-src属性删除,从而开始加载视频。

2. IFrame 懒加载

IFrame 是一种嵌入式的网页元素,也可以使用懒加载技术来优化性能。我们可以将 IFrame 的地址存储到 data-src 属性上,然后在用户触发事件时再加载资源。例如:

html 复制代码
<button id="load-iframe">Load IFrame</button>  
<iframe frameborder="0" data-src="https://www.example.com"></iframe>  
   
<script>  
  const button = document.getElementById('load-iframe');  
  const iframe = document.querySelector('iframe[data-src]');  
  
  button.addEventListener('click', function() {  
    iframe.src = iframe.dataset.src;  
    iframe.removeAttribute('data-src');  
  });  
</script>  

在上面的代码中,我们首先获取带有 data-src 属性的 iframe 标签,并将其存储到 iframe 变量中。然后,我们绑定一个点击事件到按钮上,在用户点击按钮时将 data-src 属性的值赋给 src 属性,并将data-src属性删除,从而开始加载 IFrame

总结

总之,我们可以通过一些其他的方法来进一步优化图片懒加载,而且除了图片外,还有其他类型的资源也可以使用懒加载技术来优化性能。我们可以使用类似于图片懒加载的方法来实现懒加载,例如使用 HTML5 的 videoaudio标签来实现视频和音频懒加载,使用IFrame标签来实现嵌入式网页的懒加载等,通过使用懒加载技术,来提高网页的加载速度、减少后台服务器压力,并提升用户体验,从而实现优化。

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

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

相关推荐
神仙别闹17 分钟前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
sszmvb123444 分钟前
测试开发 | 电商业务性能测试: Jmeter 参数化功能实现注册登录的数据驱动
jmeter·面试·职场和发展
测试杂货铺1 小时前
外包干了2年,快要废了。。
自动化测试·软件测试·python·功能测试·测试工具·面试·职场和发展
王佑辉1 小时前
【redis】redis缓存和数据库保证一致性的方案
redis·面试
真忒修斯之船1 小时前
大模型分布式训练并行技术(三)流水线并行
面试·llm·aigc
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0011 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端1 小时前
Content Security Policy (CSP)
前端·javascript·面试
木舟10091 小时前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤43912 小时前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang