js 图片 预加载

一、基础概念

1. 定义
   • 在JavaScript中，图片预加载是指在页面渲染或者特定操作之前，提前将图片加载到浏览器缓存中的过程。这样做可以提高用户体验，避免在需要显示图片时因为加载延迟而出现空白或者卡顿现象。

• 实现原理
  • 一种常见的方法是创建一个新的Image对象，然后设置其src属性为要预加载的图片URL。例如：
  • 一种常见的方法是创建一个新的Image对象，然后设置其src属性为要预加载的图片URL。例如：
  • 当设置src属性后，浏览器会开始加载图片，即使这个Image对象没有被添加到DOM中。

二、优势

1. 提高用户体验
   • 当用户浏览页面时，如果图片能够快速显示，会让用户感觉页面响应迅速。例如在轮播图组件中，预加载下一张图片可以确保切换时的流畅性。

• 避免布局闪烁
  • 如果图片在页面加载过程中才开始加载，可能会导致布局的调整（例如图片所在区域的高度从0突然变为实际高度），预加载可以避免这种情况。

三、类型

1. 按需预加载
   • 根据用户的操作或者页面的逻辑，在即将需要显示图片之前进行预加载。比如用户鼠标悬停在某个图标上时会显示相关的提示图片，此时可以在鼠标进入该区域之前预加载提示图片。

• 批量预加载
  • 在页面初始化或者特定场景下，一次性预加载多个图片。例如在加载一个图片集页面时，提前预加载部分或者全部图片。

四、应用场景

1. 图片画廊或轮播图
   • 确保快速切换图片时的流畅性。

• 单页应用（SPA）中的图片展示
  • 在不同的视图之间切换时，如果涉及到图片显示，预加载可以提高视觉效果。
• 游戏开发中的场景元素
  • 如果游戏中有背景图、角色形象等图片元素，预加载可以避免游戏过程中的卡顿。

五、可能遇到的问题及解决方法

1. 内存占用问题
   • 如果预加载大量图片，可能会导致浏览器内存占用过高。
   • 解决方法：
     • 可以设置预加载图片的数量上限。例如使用一个队列来管理预加载任务，当队列中的任务数量达到一定值时停止新的预加载任务。
     • 对于不再需要的预加载图片，可以手动释放内存（在某些情况下，浏览器会自动回收，但可以尝试将Image对象的引用设置为null）。

• 缓存失效问题
  • 如果图片更新了，但是浏览器仍然使用缓存的旧版本。
  • 解决方法：
    • 在图片URL后面添加版本号或者时间戳等参数，使每次请求看起来都是新的，从而强制浏览器重新加载图片。例如：img.src = "your_image_url.jpg?v = 1.0.1"或者img.src = "your_image_url.jpg?timestamp=" + new Date().getTime();