當為img加載新的src時，jquery不會在403上觸發錯誤事件

Question

我正在嘗試制作一個包含靜態Google地圖的網頁。 調整頁面大小時，我會動態更改地圖。 我在一個函數中有以下代碼，該函數在頁面調整大小時觸發，並在檢查頁面上元素的大小匹配后定期：

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請求新圖像。

Answer 1

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

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

Answer 2

如果您只是想知道圖片是否加載，我認為您不需要加載位，以下示例適用於我：

.error（）是.bind（'error'，handler）的快捷方式。

預設的src加載正常，一旦加載（documentready）jquery嘗試用無效文件替換它，如果不能，則回退到google徽標

<!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>

Answer 3

這是我在環顧四周后最終提出來的。

問題是Google正在返回圖像以及403狀態，因此會觸發onload事件。 所以我的代碼會加載10px×10px的錯誤圖像，無論它所在的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函數中檢查圖像大小。

當為img加載新的src時，jquery不會在403上觸發錯誤事件

問題描述

3 個解決方案

解決方案1
1 2012-09-05 13:34:13

解決方案2
0 2012-09-05 17:53:29

解決方案3
0 已采納 2012-09-06 09:35:17

當為img加載新的src時，jquery不會在403上觸發錯誤事件

問題描述

3 個解決方案

解決方案1 1 2012-09-05 13:34:13

解決方案2 0 2012-09-05 17:53:29

解決方案3 0 已采納 2012-09-06 09:35:17

解決方案1
1 2012-09-05 13:34:13

解決方案2
0 2012-09-05 17:53:29

解決方案3
0 已采納 2012-09-06 09:35:17