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');
}

当google maps api重载时（由于我的一个bug导致无限循环，此刻发生）我得到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 个答案: