预加载图片未从缓存读取，拖动切换卡顿问题求助

核心原因分析 #

• 缓存策略未生效：预加载时图片返回200不代表浏览器会长期缓存。如果服务器没配置Cache-Control、Expires这类强缓存头，或者缓存时间过短，拖动时浏览器仍会向服务器发起新请求，而非直接读取本地缓存。
• 频繁切换src导致请求中断：touchmove事件触发频率极高，每次修改:src都会让浏览器发起新请求，之前未完成的请求会被直接取消。本地环境资源加载快，这个问题被掩盖；服务器环境网络有延迟，就会出现“只有停止拖动才显示图片”的现象。
• 预加载实例被垃圾回收：如果预加载的Image对象没有被全局变量引用，浏览器可能会回收这些实例，导致缓存失效，需要重新请求图片。

针对性解决方案 #

1. 配置服务器强缓存
   给图片资源设置长期有效的缓存头，比如：

   Cache-Control: public, max-age=31536000
   

   这样浏览器会把图片持久化到本地缓存，后续请求直接读取，不再向服务器发起请求。

2. 保留预加载的Image实例引用
   修改预加载代码，把加载完成的Image对象存储到全局容器中，避免被垃圾回收：

   // 全局存储预加载的图片实例
   const preloadedImages = {};
   
   const loadOneImage = (url) => {
     return new Promise(function(resolve, reject) {
       // 已预加载过直接返回
       if (preloadedImages[url]) {
         checkLoadingFinishedOK(url);
         resolve(url);
         return;
       }
       const img = new Image();
       img.onload = function() {
         preloadedImages[url] = img; // 存储实例到全局
         checkLoadingFinishedOK(url);
         resolve(url);
       };
   
       img.onerror = function() {
         checkLoadingFinishedNOOK(url);
         reject(url);
       };
       img.src = url;
     });
   };
   

3. 优化拖动切换逻辑
   不在touchmove中频繁修改:src，只记录目标图片路径，在touchend事件中才切换显示：

   // Vue组件示例
   data() {
     return {
       currentImageUrl: '',
       pendingImageUrl: ''
     }
   },
   methods: {
     onTouchMove(e) {
       // 仅计算并暂存目标图片路径
       this.pendingImageUrl = this.getImageUrlByX(e.touches[0].clientX);
     },
     onTouchEnd() {
       // 拖动结束后才更新显示的图片
       this.currentImageUrl = this.pendingImageUrl;
     }
   }
   

   模板中绑定:src="currentImageUrl"，避免拖动过程中频繁触发请求。

4. 验证缓存状态
   在浏览器Network面板查看图片请求的Size列：如果显示from disk cache或from memory cache，说明缓存生效；如果仍显示资源大小，需重新调整服务器缓存配置。

内容的提问来源于stack exchange，提问作者bluelemonade