我想使用jQuery异步加载页面上的外部图像,并且尝试了以下操作:
$.ajax({
url: "http://somedomain.com/image.jpg",
timeout:5000,
success: function() {
},
error: function(r,x) {
}
});
但是它总是返回错误,是否有可能像这样加载图像?
我尝试使用.load
method,但是它有效,但是我不知道如果图像不可用,如何设置超时时间(404)。我怎样才能做到这一点?
无需ajax。您可以创建一个新的图像元素,设置其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);
}
});
如果您真的需要使用AJAX ...
我遇到过一些用例,其中onload处理程序不是正确的选择。以我为例,通过javascript打印时。因此,实际上有两种方法可以使用AJAX样式:
解决方案1
使用Base64图像数据和REST图像服务。如果您拥有自己的Web服务,则可以添加JSP / PHP REST脚本,该脚本以Base64编码提供图像。现在有什么用?我遇到了一个很酷的新图像编码语法:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhE..."/>
因此,您可以使用Ajax加载Image 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);
});
解决方案2:
欺骗浏览器以使用其缓存。当资源位于浏览器缓存中时,这为您提供了一个不错的fadeIn():
var url = 'IMAGE_URL';
$.ajax({
url : url,
cache: true,
processData : false,
}).always(function(){
$("#IMAGE_ID").attr("src", url).fadeIn();
});
但是,这两种方法都有其缺点:第一种方法仅适用于现代浏览器。第二个有性能故障,并依赖于将如何使用缓存的假设。
欢呼,将
使用jQuery,您可以简单地将“ src”属性更改为“ data-src”。图片不会被加载。但是位置与标签一起存储。我喜欢
<img class="loadlater" data-src="path/to/image.ext"/>
一个简单的jQuery片段将data-src复制到src,它将在需要时开始加载图像。就我而言,页面已完成加载。
$(document).ready(function(){
$(".loadlater").each(function(index, element){
$(element).attr("src", $(element).attr("data-src"));
});
});
我敢打赌,jQuery代码可以缩写,但这是可以理解的。
$(<img />).attr('src','http://somedomain.com/image.jpg');
应该比ajax更好,因为如果它是一个图库,并且您正在循环浏览图片列表,则如果图像已经在缓存中,它将不会向服务器发送另一个请求。如果是jQuery / ajax,它将请求并返回HTTP 304(未修改),然后使用缓存中的原始图像(如果已存在)。上述方法减少了画廊中图像的第一个循环之后对服务器的空请求。
您可以使用Deferred对象进行ASYNC加载。
function load_img_async(source) {
return $.Deferred (function (task) {
var image = new Image();
image.onload = function () {task.resolve(image);}
image.onerror = function () {task.reject();}
image.src=source;
}).promise();
}
$.when(load_img_async(IMAGE_URL)).done(function (image) {
$(#id).empty().append(image);
});
请注意:image.onload必须在image.src之前,以防止缓存问题。
如果您只想设置图像的来源,则可以使用它。
$("img").attr('src','http://somedomain.com/image.jpg');
这也可以..
var image = new Image();
image.src = 'image url';
image.onload = function(e){
// functionalities on load
}
$("#img-container").append(image);
AFAIK,您必须在此像.ajax()一样执行.load()函数,但是您可以使用jQuery setTimeout使其保持活动状态(ish)
<script>
$(document).ready(function() {
$.ajaxSetup({
cache: false
});
$("#placeholder").load("PATH TO IMAGE");
var refreshId = setInterval(function() {
$("#placeholder").load("PATH TO IMAGE");
}, 500);
});
</script>
使用.load加载图像。要测试是否收到错误(例如404),可以执行以下操作:
$("#img_id").error(function(){
//$(this).hide();
//alert("img not loaded");
//some action you whant here
});
注意-当图像的src属性为空时,不会触发.error()事件。
$(函数(){
if ($('#hdnFromGLMS')[0].value == 'MB9262') {
$('.clr').append('<img src="~/Images/CDAB_london.jpg">');
}
else
{
$('.clr').css("display", "none");
$('#imgIreland').css("display", "block");
$('.clrIrland').append('<img src="~/Images/Ireland-v1.jpg">');
}
});
文章标签:ajax , image , javascript , jquery , jquery-load
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!