图片优化之:到底用预加载还是懒加载?傻傻分不清楚..

前言

在说到对图片资源进行优化时,那就不得不提到图片预加载和图片懒加载,可能很多朋友都了解这两者,但是一直没有很清晰的概念,以及什么时候用,用在什么场景下,今天就来详细的了解一下吧!

图片预加载

图片预加载是指在页面加载时提前加载页面中需要使用的图片资源,将它们缓存在浏览器中

这样当用户需要查看这些图片时,就可以直接从缓存中获取,减少等待时间,提升用户体验。

以下是一个简单的栗子:

js 复制代码
function preloadImages(urls, allImagesLoadedCallback) {
  const imgs = [];
  const loadedCounter = [];
  urls.forEach((url, i) => {
    imgs[i] = new Image();
    // 处理加载计数器
    imgs[i].onload = imgs[i].onerror = () => {
      if (loadedCounter.length === urls.length) {
        allImagesLoadedCallback();
      }
    };
    imgs[i].src = url;
  });
}

preloadImages([
  'https://example.com/image1.png',
  'https://example.com/image2.png',
  'https://example.com/image3.png'
], () => {
  console.log('All images have been preloaded');
});

通过 JS 创建 Image 对象,设置其 src 属性为要预加载的图片URL,浏览器会自动下载这些图片资源并缓存在本地。

当页面需要展示这些预加载的图片时,浏览器可以直接从本地磁盘缓存中读取图片数据,不需要再次向服务器发起请求下载图片。

从缓存中获取图片数据比从远程服务器下载要快得多,因为:

  • 无需再次建立网络连接
  • 无需等待服务器响应
  • 无需传输数据的延迟

图片懒加载

图片懒加载是一种在页面滚动到图片位置时才加载图片的技术。这样可以减少页面初始加载时的数据量,加快页面加载速度。当用户滚动到图片位置时,再动态加载并显示图片。

使用Intersection Observer API :这是一个原生浏览器API,用于异步观察目标元素与其祖先元素或顶级文档视口的交叉状态。当目标元素进入视口时,可以触发回调函数来加载图片。

参考文档:

IntersectionObserver - Web API 接口参考 | MDN (mozilla.org)

以下是一个简单的栗子:

js 复制代码
const images = document.querySelectorAll('img[data-src]');  
  
const observer = new IntersectionObserver((entries, observer) => {  
    entries.forEach(entry => {  
        if (entry.isIntersecting) {  
            const img = entry.target;  
            const src = img.dataset.src;  
            img.src = src;  
            img.classList.remove('lazy');  
            observer.unobserve(img);  
        }  
    });  
});  
  
images.forEach(image => {  
    observer.observe(image);  
});

我们为所有带有data-src属性的图片元素设置了一个Intersection Observer。当图片进入视口时,我们从data-src属性中获取实际的图片URL,并将其设置为图片的src属性,从而触发图片的加载。

应用场景

图片预加载应用场景:

  1. 需要快速显示的关键图片: 对于一些需要尽快展示的关键图片,如电商网站的产品主图、新闻门户网站的头版头条图片等,可以使用预加载技术,确保这些图片能够快速显示出来,提升首屏体验。
  2. 幻灯片、图片画廊等: 在包含幻灯片或图片画廊的页面中,可以预加载相关的一些图片,使得用户切换时,下一张图片已经就绪,可以无延迟显示。
  3. 游戏等富媒体应用: 游戏或者富媒体应用往往需要加载大量图片资源,可以在加载界面预加载部分关键资源,缩短真正进入应用的等待时间。
  4. 小型网站或单页面应用: 对于页面数量较少、图片资源有限的小型网站或单页面应用,直接预加载所有图片也是可行的,方便后续无延迟加载。

图片懒加载应用场景:

  1. 图文内容丰富的页面: 一些包含大量图文内容的页面,如新闻资讯、博客等,初始加载所有图片会拖慢页面速度。此时可使用懒加载,仅加载首屏图片,其他图片滚动到视口时再加载。
  2. 长列表或图库页面电商:详情、图片社交等页面往往包含大量图片列表,如果全部预加载会影响加载性能。使用懒加载可以只加载当前视口内的图片,提高加载速度。
  3. 移动端页面: 移动端的网络环境往往不如桌面端稳定,也更加重视首屏加载速度。使用懒加载图片可以减少移动端首屏数据传输量,提升加载体验。
  4. 无限滚动的页面: 对于无限滚动加载数据的页面,不可能一次性加载所有图片,此时必须采用懒加载策略。

相关推荐
小政爱学习!21 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。26 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼33 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k093336 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
web行路人1 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱0011 小时前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
人工智能培训咨询叶梓1 小时前
探索开放资源上指令微调语言模型的现状
人工智能·语言模型·自然语言处理·性能优化·调优·大模型微调·指令微调
子非鱼9211 小时前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
周亚鑫2 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf