[英]Check if image exists before loading
我使用了来自其他各种 Stack Overflow 问题的示例,出于某种原因,这对我不起作用。 我制作了一个函数来获取缩略图图像并返回实际图像路径或默认(无缩略图)图像的路径。
使用 JQuery 方法和 Javascript Image 类,我得到关于控制台中丢失图像的 404 错误,并且找到的图像没有错误但没有显示。 谁能指出我做错了什么?
在 getThumbnail() 函数中,写入控制台时的“image_url”显示正确。 当我在调用函数中并记录返回值时,它只是显示为“未定义”。
查询:
function getThumbnail(name)
{
var image_url = "images/" + name + ".jpg";
$.get(image_url)
.done(function()
{
return image_url;
})
.fail(function()
{
return "images/default.jpg";
})
}
Javascript:
function getThumbnail(name)
{
var image = new Image();
image.src = image_url;
image.onload = function()
{
return image;
}
image.onerror = function()
{
return "images/default.jpg";
}
}
调用函数:
$.each( cycle, function( key, value )
{
var mapIndex = key;
var mapValue = value;
var brick = "<div class='brick small'><a class='delete' href='#'>×</a><img src='" + getThumbnail(value) + "' /><h2><span>" + value + "</span></h2></div>";
$( ".gridly" ).append( brick );
});
它不起作用的问题是getThumbnail()方法不会按你的意愿运行。
.onload是一个异步调用,对于这种情况,getThumbnail(value)将始终具有未定义的返回结果;
要完成你想要的,你可以做以下事情:
<img src="/image/..." onerror="javascript:this.src='images/default.jpg'"/>
这是行不通的,因为return
是onerror
和onload
函数,并且因为请求是异步的,所以函数不会等到reuest完成。
你可以使用回调来实现这一点。
function callback(src, value){
var brick = "<div class='brick small'><a class='delete' href='#'>×</a><img src='" + src + "' /><h2><span>" + value + "</span></h2></div>";
$( ".gridly" ).append( brick );
}
function getThumbnail(name, c)
{
var image_url = "images/" + name + ".jpg";
var image = new Image();
image.onload = function()
{
c(image_url, name);
}
image.onerror = function()
{
c("images/default.jpg", name);
}
image.src = image_url;
}
$.each( cycle, function( key, value )
{
var mapIndex = key;
var mapValue = value;
getThumbnail(value, callback);
});
使用标准的 xmlhttprequest,简单
var x = new XMLHttpRequest(); x.open("get", "your_url.com/image.ext or /image.png or image.jpg", true);x.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) {alert('exist');}else{alert('does not exist'};}; x.send();
或简单的方法
var i = new Image(); i.onload = alert('exist'); i.onerror = alert('npt exist'); i.src = imageSrc;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.