上传图片后图片加载失败，或因后台ftp传输共享目录延迟导致获取不到
<p>在前端上传图片后，通过ajax传输至后台服务器，后台服务器通过ftp方式将文件发送至共享目录中，或因传输延迟或共享目录同步延迟导致前端无法获取到已上传的图片信息，这时需要对图片进行重新加载处理。</p><p>进行重新加载时需考虑加载次数以及加载时间，当图片加载失败时，通过重试机制重新加载图片。随加载次数递增，延长加载时间。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">// 全局图片错误重试处理
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('?');
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);
}
});
</pre>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/Dream-new/p/19160840
頁:
[1]