网站首页 全球最实用的IT互联网站!

人工智能P2P分享Wind搜索发布信息网站地图标签大全

当前位置:诺佳网 > 软件工程 > 前端开发 > JavaScript >

上传图片后图片加载失败,或因后台ftp传输共享

时间:2025-10-23 15:38

人气:

作者:admin

标签:

导读:在前端上传图片后,通过ajax传输至后台服务器,后台服务器通过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);
    }
});

  

温馨提示:以上内容整理于网络,仅供参考,如果对您有帮助,留下您的阅读感言吧!
相关阅读
本类排行
相关标签
本类推荐

CPU | 内存 | 硬盘 | 显卡 | 显示器 | 主板 | 电源 | 键鼠 | 网站地图

Copyright © 2025-2035 诺佳网 版权所有 备案号:赣ICP备2025066733号
本站资料均来源互联网收集整理,作品版权归作者所有,如果侵犯了您的版权,请跟我们联系。

关注微信