動態

詳情 返回 返回

上傳圖片後圖片加載失敗，或因後台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);
    }
});

　　

前端
點贊

Add a new 評論

Some HTML is okay.