我想使用jQuery在我的页面上异步加载外部图像,我已经尝试了以下方法:
$.ajax({
url: "http://somedomain.com/image.jpg",
timeout:5000,
success: function() {
},
error: function(r,x) {
}
});
但是它总是返回错误,有没有可能像这样加载图像?
我尝试使用.load
方法,但如果图像不可用,我不知道如何设置超时(404)。我该怎么做呢?
发布于 2010-11-26 19:54:47
不需要ajax。您可以创建一个新的image元素,设置其source属性,并在完成加载后将其放入文档中的某个位置:
var img = $("<img />").attr('src', 'http://somedomain.com/image.jpg')
.on('load', function() {
if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
alert('broken image!');
} else {
$("#something").append(img);
}
});
发布于 2012-10-04 02:11:43
如果您确实需要使用AJAX,请使用...
我遇到了onload处理程序不是正确选择的用例。在我的例子中,当通过javascript打印时。因此,实际上有两个选项可以使用AJAX样式:
解决方案1
使用Base64图像数据和REST图像服务。如果您有自己的REST服务,可以添加一个提供Base64编码图像的JSP/PHP脚本。那么这有什么用呢?我偶然发现了一种很酷的图像编码新语法:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhE..."/>
因此,您可以使用Ajax加载图像Base64数据,然后在完成时将Base64数据字符串构建到图像!非常有趣:)。我推荐使用这个站点的http://www.freeformatter.com/base64-encoder.html进行图像编码。
$.ajax({
url : 'BASE64_IMAGE_REST_URL',
processData : false,
}).always(function(b64data){
$("#IMAGE_ID").attr("src", "data:image/png;base64,"+b64data);
});
Solution2:
诱使浏览器使用其缓存。当资源在浏览器缓存中时,这将为您提供一个很好的fadeIn():
var url = 'IMAGE_URL';
$.ajax({
url : url,
cache: true,
processData : false,
}).always(function(){
$("#IMAGE_ID").attr("src", url).fadeIn();
});
然而,这两种方法都有其缺点:第一种方法只能在现代浏览器上使用。第二个问题有性能问题,并且依赖于如何使用缓存的假设。
干杯,威尔
发布于 2015-06-15 01:39:04
使用jQuery,您可以简单地将"src“属性更改为"data-src”。图像将不会被加载。但是位置与标签一起存储。我很喜欢。
<img class="loadlater" data-src="path/to/image.ext"/>
一段简单的jQuery将data-src复制到src,src将在您需要时开始加载映像。在我的例子中,当页面加载完成时。
$(document).ready(function(){
$(".loadlater").each(function(index, element){
$(element).attr("src", $(element).attr("data-src"));
});
});
我敢打赌,jQuery代码可以缩写,但这样是可以理解的。
https://stackoverflow.com/questions/4285042
复制相似问题