在前端上传图片后,通过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);
}
});

  

上传图片后图片加载失败,或因后台ftp传输共享目录延迟导致获取不到的更多相关文章

  1. JavaScript-onerror事件:图片加载失败后不显示

    HTML: <img src="http://www.mazey.net/images/upload/image/20170518/1495122198180663.gif" ...

  2. 当h5页面图片加载失败后,给定一个默认图

    本文主要讨论页面中图片加载失败后替换默认图片的几种方式 重点来了:一定要记住error事件不冒泡. 相关的知识点:jquery的ready方法.$("img").error().i ...

  3. WebForm、MVC图片加载失败处理

    还是那个该死的WebFrom项目,部分功能替换为MVC后感觉好多了,但是WebForm.MVC都有图片加载失败时显示提示图片的需求,并且统一在js中处理.问题来了,js中图片路径怎么处理呢?现场有可能 ...

  4. js img图片加载失败,重新加载+断网检查

    我们常常会遇到img加载图片的时候因为网络问题或者图片过大导致图片加载失败的问题,页面就因为这张蹦掉的图变得不美观.所以我们需要图片加载失败的时候重新加载图片,前端图片加载优化 //js方法定义 fu ...

  5. 伪元素黑魔法:一个替代onerror解决图片加载失败的方案

    问题的引出是这样的,在一个项目中有大量的页面主体是table做数据展示,所以就封装了一个table的组件,提供动态渲染的方案.有个问题是数据类型中有图片,对于图片的加载失败我们需要做容错.一般我们的思 ...

  6. html网页图片加载失败的友好处理方式

    网络环境总是多样且复杂的,一张网页图片可能会因为网路状况差而加载失败或加载超长时间,也可能因为权限不足或者资源不存在而加载失败,这些都会导致用户体验变差,所以我们需要对图片加载失败时的情况进行一个弥补 ...

  7. AngularJS中如果ng-src 图片加载失败怎么办

    我们知道AngularJS加载图片的方法是用技术分享加ng-src标签,例如: <img ng-src="{{currentUrl}}"/> 其中currentUrl为 ...

  8. 当图片加载失败时更换图片, Firefox onerror 报错

    当图片加载失败时更换图片. <!DOCTYPE html> <meta charset="UTF-8"> <img src="http:// ...

  9. js 图片加载失败处理方法

    在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败:这样就会显示一个很难看的坏图片缩略图:下面介绍两种方法,解决这个问题: 1.如果在你的项目中有引入jQuery插件,你可以使用error( ...

  10. angular 图片加载失败 情况处理? 如何在ionic中加载本地图片 ?

    1.angular 图片加载失败 情况处理 在directive中定义组件,在ng-src错误时,调用err-src app.directive('errSrc',function(){ return ...

随机推荐

  1. maven手动导入jar包 -九五小庞

    手动导入jar包需要有pom.xml文件. mvn install:install-file -Dfile=G:\PXY\JFAPP\project28\ris-api-2.1.3\dcm4che\d ...

  2. 深入理解 JavaScript 时间分片:原理、应用与代码示例解析

    JavaScript 时间分片(Time Slicing)是一种优化技术,用于将长时间运行的任务拆分为多个小任务,以避免阻塞主线程,提高页面的响应性和性能.本文将详细解释 JavaScript 时间分 ...

  3. 云原生应用开发“12-Factors”

    12 Factor 简介 如今,软件通常会作为一种服务来交付,它们被称为网络应用程序,或软件即服务(SaaS).12-Factor 为构建如下的 SaaS 应用提供了方法论: 使用标准化流程自动配置, ...

  4. IDEA激活付费插件ANSI Highlighter Premium永久激活教程(2025最新版)

    大家好,欢迎来到程序视点!我是你们的老朋友.安戈! IDEA付费插件TOP1 关注过[程序视点]的读者小伙伴们肯定都知道,我们付费版JetBrains全家桶IDE是支持常用付费插件的!!       ...

  5. 关于如何快速对Excel进行数据对比的小方法

    日常办公使用Excel进行数据对比时,常常会遇到一对多匹配的问题,导致数据匹配不准确.往常这时就需要咱们人工来一个一个查漏补缺,现在有个很简单的工具就可以直接丢给核对助手来完成. 我们只用分别导入表格 ...

  6. Sevlet与Tomcat

    前言 在弄懂Spring MVC的原理与架构先,不得不先弄清楚Sevlet与Tomcat,刚开始我甚至将两者弄混,本篇希望能够让uu了解并区分好两者. 正文 Tomcat: 开源的 Servlet 容 ...

  7. Mysql 查询日志slow_launch_time和Long_query_time

    今天看Mysql性能优化的时候看到了对于Long_query_time值的设置,突然想起昨天在论坛看到的一个帖子遇到类似的问题,将slow_launch_time的时间设置为2,也开启了慢查询日志,但 ...

  8. swagger2默认不展开/展开

    https://blog.csdn.net/fsdf8sad7/article/details/89478469 当接口太多的时候,接口全部展开的时候访问会非常卡,点击一个接口也要卡很久. 后来在地址 ...

  9. 主流 nodejs 包管理器 pnpm vs bun vs npm vs yarn 简单横评

    前端 我最近一直在写前端项目,使用的环境也从原本的 Node.js 切换到 bun,感受到了飞一般的体验. 今天要维护一下 StarBlog Vue Admin 项目时,又得安装一次依赖,于是突发奇想 ...

  10. 第一周测试赛 & 第二周测试赛

    监控 1.算法思想维度 问题类型:贪心.并查集 误判原因:并查集处理区间覆盖时直接从 \(r\) 开始,应该从 Find(r),因为 \(r\) 可能已经被覆盖. 正确思路:考虑按右端点排序,我们肯定 ...