[英]Jquery/javascript check an image exists and correct it
给出3张图片网址
http://www.vbarter.com/images/content/3/2/32822.JPG (加载) http://www.vbarter.com/images/content/3/2/32784.png (加载)
http://www.bikewalls.com/pictures/abc.jpg (不加载)
我需要一个javascript / jquery函数/代码来自动更改有效的扩展名。 以上面的例子为例将非常有帮助。 这是我的代码片段:
function imgError(image) {
image.onerror = "";
var image_src=image.src.substring(0, image.src.length-3);
image.src = image_src+"png";
$.ajax({
type: "HEAD",
url: image.src, //or your url
success: function(data){
},
error: function(data){
image.src = image_src+"JPG";
$.ajax({
type: "HEAD",
url: image.src, //or your url
success: function(data){
},
error: function(data){
alert("image fails");
},
});
},
});
return true;
}
HTML part
<img src="above url" onerror="imgError(this);">
考虑图像src是vbarter.com/images/content/3/2/32822.jpg的情况。 在内部ajax函数内部,它进入错误部分并警告“图像失败”。 但vbarter.com/images/content/3/2/32822.JPG存在。
实际上您的代码是正确的,但问题是由于使用jsfiddle网站上的ajax的跨域请求问题
我修改了你的jsfiddle示例,将图像源更改为同一域下的图像。 您会发现结果与您的预期相同。
<div style="background-color:black;">
<img src="http://fiddle.jshell.net/img/logo.jpg" onerror="imgError(this);" />
</div>
<script>
function imgError(image) {
image.onerror = "";
var image_src=image.src.substring(0, image.src.length-3);
image.src = image_src+"jpg";
$.ajax({
type: "HEAD",
url: image.src, //or your url
success: function(data){
alert("png sucess");
},
error: function(data){
image.src = image_src+"png";
.ajax({
type: "HEAD",
url: image.src, //or your url
success: function(data){
alert("JPG success");
},
error: function(data){
alert("JPG fails");
},
});
}
});
return true;
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.