当前位置: 首页 > news >正文

上传图片后图片加载失败,或因后台ftp传输共享目录延迟导致获取不到

在前端上传图片后,通过ajax传输至后台服务器,后台服务器通过ftp方式将文件发送至共享目录中,或因传输延迟或共享目录同步延迟导致前端无法获取到已上传的图片信息,这时需要对图片进行重新加载处理。

进行重新加载时需考虑加载次数以及加载时间,当图片加载失败时,通过重试机制重新加载图片。随加载次数递增,延长加载时间。

// 全局图片错误重试处理
window.addEventListener('error', function(e) {if (e.target.nodeName !== 'IMG') return;const img = e.target;handleImageRetry(img);
}, true);// 单独的重试处理函数
function handleImageRetry(img, options = {}) {const {maxRetries = 3,baseDelay = 1000,onRetry = null,onFail = null} = options;// 获取当前重试次数let retryCount = parseInt(img.getAttribute('data-retry-count') || '0');// 检查是否超过最大重试次数if (retryCount >= maxRetries) {if (onFail) onFail(img);console.warn(`图片 ${img.src} 已达到最大重试次数`);return;}// 更新重试计数retryCount++;img.setAttribute('data-retry-count', retryCount.toString());// 计算延迟时间(指数退避)const delay = baseDelay * Math.pow(2, retryCount - 1);console.log(`🖼️ 图片加载失败,${delay}ms后第${retryCount}次重试`);if (onRetry) onRetry(img, retryCount, delay);// 设置重试定时器const retryTimer = setTimeout(() => {clearTimeout(retryTimer);// 重新加载图片const originalUrl = img.src.split('?')[0];const newUrl = originalUrl + '?retry=' + retryCount + '&t=' + Date.now();console.log(`🔄 执行第${retryCount}次重试: ${newUrl}`);img.src = newUrl;}, delay);
}// 重置图片的重试计数(在成功加载后调用)
function resetImageRetryCount(img) {img.removeAttribute('data-retry-count');
}// 监听图片成功加载,重置重试计数
window.addEventListener('load', function(e) {if (e.target.nodeName === 'IMG') {resetImageRetryCount(e.target);}
});

  

http://www.jsqmd.com/news/20387/

相关文章:

  • 劳务工招聘助手小程序管理系统:革新劳务招聘管理的高效解决方案
  • 互动问答直播版双端小程序管理系统:开启直播变现新蓝海
  • Axure组件即拖即用:垂直折叠菜单(动态展开/收回交互) - 指南
  • 【图论】kruskal-最小生成树算法简析
  • 水贝培育钻项链生产厂家口碑榜:基于专业测评的技术、工艺及市场优势深度分析
  • win 11关闭工具栏溢出
  • 别再说我不懂Node流了
  • IIc死锁的问题
  • 增压压床生产厂家口碑榜:聚焦技术突破、产能数据及行业应用案例的权威深度解析
  • 2025年国内优质镀锌板厂家精选推荐:Q235镀锌板厂家推荐,聚焦品质与服务的实力之选
  • 详细介绍:K8s中的键值对
  • 2025 年风机厂家最新推荐榜:聚焦交流/直流/无刷/大吸力等多类型风机,精选优质企业助力采购决策
  • 权威调研榜单:山东智能镜框公司TOP3榜单好评深度解析
  • 2025 年最新推荐!变电站架构厂家榜单发布,全方位解析户外 / 户内 / GIS / 常规 / 智能型架构优质企业实力
  • Python-数据分析师修炼指南-全-
  • 2025 年电感源头厂家最新推荐榜单:功率 / 一体成型 / 屏蔽 / 共模等多系列电感优质制造商全方位解析
  • 完整教程:写csv测试
  • 权威调研榜单:铜浮雕壁画生产厂家TOP3榜单好评深度解析
  • 深入解析:Python调用优云智算安装的ComfyUI服务器
  • 2025 智能/商超照明/灯具/灯光/源头厂家推荐榜:上海富明阳 5 星领跑,这些优质灯具成商超新选
  • 权威调研榜单:湿式静电除尘设备生产厂家TOP3榜单好评深度解析
  • 完整教程:机器人中的电机与扭矩入门
  • 2025 年化粪池生产厂家最新推荐排行榜:预制 / 水泥 / 玻璃钢等多类型优质厂商权威甄选
  • Python 2025:云原生与容器化技巧的新浪潮
  • latex 插图图片代码
  • 一键配置 Web 前端开发环境(PowerShell 自动化脚本)
  • 设置模式(Leo)
  • 深入解析:C# .NetCore WebApi 性能改进 响应压缩
  • 利用客户端路径遍历实现CSRF攻击 - CSPT2CSRF技术解析
  • SDE表空间过大分析(STATES,STATE_LINEAGES表过大)