使用jQuery异步加载图像
我想使用jQuery在我的页面上异步加载外部图像，我已经尝试了以下方法：
$.ajax({
url: "http://somedomain.com/image.jpg",
timeout:5000,
success: function() {
},
error: function(r,x) {
}
});但是它总是返回错误，有没有可能像这样加载图像？
我尝试使用.load方法，但如果图像不可用，我不知道如何设置超时(404)。我该怎么做呢？
回答 11
Stack Overflow用户
发布于 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);
}
});Stack Overflow用户
发布于 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();
}); 然而，这两种方法都有其缺点:第一种方法只能在现代浏览器上使用。第二个问题有性能问题，并且依赖于如何使用缓存的假设。
干杯，威尔
Stack Overflow用户
发布于 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
复制相似问题