Javascript jquery在为img加载新src时未在403上触发错误事件
我正在尝试制作一个包含静态谷歌地图的页面。调整页面大小后，我会动态更改地图。我在一个函数中有以下代码，该函数在页面调整大小时启动，并在检查页面上元素的大小是否匹配后定期启动：Javascript jquery在为img加载新src时未在403上触发错误事件,javascript,jquery,ajax,Javascript,Jquery,Ajax,我正在尝试制作一个包含静态谷歌地图的页面。调整页面大小后，我会动态更改地图。我在一个函数中有以下代码，该函数在页面调整大小时启动，并在检查页面上元素的大小是否匹配后定期启动： if (imageDownloadEnabled) { url = 'http://maps.googleapis.com/maps/api/staticmap?center=' + userLat + ',' + userLng + '&zoom=14&size=' + ((theWidth/2)|
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');
}
if（imageDownloadEnabled）{
url='1〕http://maps.googleapis.com/maps/api/staticmap?center=“+userLat+”、“+userLng+”&zoom=14&size=”+（（宽度/2）| 0）+“x”+（（高度/2）| 0）+”&sensor=false&scale=2'；
newImage=$（'
当GoogleMapsAPI过载时（此时发生，因为我的一个bug导致了一个无限循环），我得到了一个403错误和一个替换图像。但是错误事件处理程序没有被调用
有什么办法解决这个问题吗？我想确保在403事件中，页面停止从Google请求新图像。尝试使用.load的完整回调函数并检查textStatus值
.load($url,function(responseText, textStatus, XMLHttpRequest) {
if(textStatus=="error") {
//do something
}
});
如果您只想知道图像是否加载失败，我认为不需要加载位，下面的示例适用于我：
.error（）是.bind（'error'，handler）的快捷方式
一旦加载（documentready）的jquery尝试用无效文件替换它，预设的src就会很好地加载，如果不能，就会返回到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>
$（文档）.ready（函数（）{
$（“#foo image”）。错误（函数（）{
警报（“加载图像时出错，正在替换…”）；
$（this）.attr（“src”http://www.google.co.uk/images/srpr/logo3w.png");
}).attr（“src”，“missing.png”）；
});
这是我环顾四周后最后想到的
问题是Google正在返回一个带有403状态的图像，因此onload事件被触发。因此我的代码将加载10px x 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);
}
if（imageDownloadEnabled）{
url='1〕http://maps.googleapis.com/maps/api/staticmap?center=“+userLat+”、“+userLng+”&zoom=14&size=”+（（rightWidth/2）| 0）+“x”+（（rightHeight/2）| 0）+”&传感器=false&scale=2'；
oldMap=$（“#映射图像”）；
var img=新图像（）；
img.onload=函数（）{
如果（this.width<100 | | | this.height）在这里发现了一个类似的问题并给出了回答否，那么这不是load ajax调用，它从外部源加载html。这是load事件处理程序，它在事件发生时被调用（src属性被更改）.但我同意你所说的原则。我将eventObject传递给函数，但它不包含状态代码。你是否在本地文件中运行此代码？引用jquery文档“此外，当页面在本地提供服务时，可能无法正确触发错误事件；错误依赖于HTTP状态码，如果URL使用file:protocol，通常不会触发错误事件。”不，图像来自google静态地图api，备份来自我们的服务器。