4

我正在尝试制作一个包含静态 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');
}

当 google maps api 重载（目前发生，因为我的一个 bug 导致了无限循环）我得到一个 403 错误和一个替代图像。虽然没有调用错误事件处理程序。

有没有办法解决？我想确保在 403 事件中，该页面停止向 Google 请求新图片。

4

3 回答 3

1

尝试使用 .load 的完整回调函数并检查 textStatus 值

.load($url,function(responseText, textStatus, XMLHttpRequest) {
    if(textStatus=="error") {
        //do something
    }
});
于 2012-09-05T13:34:13.197 回答
0

如果您只想知道图像是否无法加载，我认为您不需要加载位，以下示例适用于我：

.error() 是 .bind('error', handler) 的快捷方式。

预设 src 加载正常，一旦加载（文档就绪）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-05T17:53:29.803 回答
0

这是我环顾四周后最终想到的。

问题是 Google 正在返回图像以及 403 状态，因此触发了 onload 事件。所以我的代码会加载 10px x 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);
}

In case it is not clear, below a certain browser size I get rid of the map, which is why I simply check for image size in the onload function.

于 2012-09-06T09:35:17.733 回答