jquery沒有在403上加載錯誤事件時爲img加載新的src

我想製作一個包含靜態Google地圖的頁面。在調整頁面大小時，我會動態更改地圖。我有一個功能，下面的代碼這是在頁面大小調整和檢查後定期發射了頁面上的匹配元件的大小：jquery沒有在403上加載錯誤事件時爲img加載新的src

if (imageDownloadEnabled) { 
    url = 'http://maps.googleapis.com/maps/api/staticmap?center=' + userLat + ',' + userLng + '&zoom=14&size=' + ((theWidth/2)|0) + 'x'+ ((theHeight/2)|0) + '&sensor=false&scale=2'; 
    newImage = $('<img />'); 
    console.log('Retrieving map from ' + url); 

    newImage.error(function() { 
     console.log("error loading image"); 
     imageDownloadEnabled = false; 
    }).load(function(eventObject) { 
     console.log("done loading image"); 
     console.dir(eventObject); 
     $('#maps-image').replaceWith(newImage); 
     newImage.attr('id', 'maps-image'); 
    }).attr('src', url); 
/**/ 
} else { 
    console.log('disabled'); 
}

當谷歌地圖API的重載（目前因爲一個錯誤發生我的造成無限循環）我得到一個403錯誤和替代圖像。錯誤事件處理程序不會被調用。

有沒有辦法解決這個問題？我想確保在出現403的情況下，該網頁停止向Google申請新圖片。

來源

2012-09-05 Tom Macdonald

這是我想出了最後，環顧四周。

問題是Google正在返回一個圖像以及403狀態，所以onload事件被觸發。所以我的代碼會加載10像素×10像素的錯誤圖像，不管它所在的div的大小如何。

訣竅是使用內存中的Image（），加載url並檢查圖像的大小在onload事件中。如果圖像太小，請加載站臺。

代碼：

if (imageDownloadEnabled) { 
    url = 'http://maps.googleapis.com/maps/api/staticmap?center=' + userLat + ',' + userLng + '&zoom=14&size=' + ((rightWidth/2)|0) + 'x'+ ((rightHeight/2)|0) + '&sensor=false&scale=2'; 
    oldMap = $('#maps-image'); 
    var img = new Image(); 
    img.onload = function() { 
     if(this.width < 100 || this.height <100) { 
      console.log('Google 403, loading standin'); 
      /* disable image download */ 
      imageDownloadEnabled = false; 
      oldMap.attr('src', standinUrl); 
     } else { 
      oldMap.attr('src', url); 
     } 
    } 
    img.onerror = function() { 
     console.log('Error, loading standin'); 
     oldMap.attr('src', standinUrl); 
    } 
    img.src = url; 
} else { 
    oldMap.attr('src', standinUrl); 
}

如果它是不明確的，有一定的瀏覽器大小我擺脫了地圖，這就是爲什麼我只是檢查在onload函數圖像尺寸的下方。

來源

2012-09-06 09:35:17

嘗試使用.load的完整的回調函數，並檢查textStatus值

.load($url,function(responseText, textStatus, XMLHttpRequest) { 
    if(textStatus=="error") { 
     //do something 
    } 
});

來源

2012-09-05 13:34:13

剛剛在響應中發現了一個類似的問題http://stackoverflow.com/questions/936357/checking-jquery-ajax-load-success –

不，這不是加載ajax調用，它從外部源加載html 。這是加載事件處理程序，當事件發生時（src屬性發生更改）它會被調用。 http://api.jquery.com/load-event/ –

但我同意你所說的原則。我將eventObject傳遞給函數，但它不包含狀態碼。 –

我不認爲你需要的負載位，如果你只是想知道如果圖像加載失敗，下面的示例適用於我：

.error（）是.bind（'error'，處理程序）的快捷方式。

預設SRC加載罰款，一旦其加載（documentready）jQuery的嘗試使用無效的文件來替換它，並回落到谷歌的標誌，如果它不能

<!DOCTYPE html> 
<html> 
    <head> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $("#foo-image").error(function(){ 
        alert("error loading image, substituting..."); 
        $(this).attr("src","http://www.google.co.uk/images/srpr/logo3w.png"); 
       }).attr("src", "missing.png"); 
      }); 
     </script> 
    </head> 
    <body style="font-family:arial; font-weight:bold;"> 
     <img id="foo-image" src="http://www.iskin.co.uk/wallpapers/imagecache/ipad/union_flag_wallpaper.jpg" /> 
    </body> 
</html>

來源

2012-09-05 17:53:29

jquery沒有在403上加載錯誤事件時爲img加載新的src

回答

相關問題