我正在使用setInterval和jQuery加载函数来定期更新图像标记。
var refresh_days = setInterval(function() {
$('#box_name').load("dynamic.php");}, 1000 );
这样可行,但在新图像完全加载之前会有一点延迟,在此期间不会显示任何内容。
有没有办法我可以等到新图像完全加载,然后显示它,以便图像从用户的角度瞬间改变?
我的目标浏览器是Chrome,我不需要它与IE兼容。
谢谢,
答案 0 :(得分:5)
您可以将图片加载到不可见的<img>
标记中,并使用“加载”事件来更新可见的标记。
$('#hiddenImage').attr('src', newImageUrl).load(function() {
$('#realImage').attr('src', newImageUrl);
});
这样你知道它在缓存中,因此对可见图像的更新应该非常快。
如果你正在重新加载一大块东西,那么你就会遇到问题因为“加载”操作会更新页面而然后浏览器会启动HTTP事务来满足<img>
标记中的隐式“GET”请求。因此,你可以做的是:
<div>
答案 1 :(得分:2)
尝试使用get方法......
$.get("dynamic.php", function(result){
$("#box_name").replace(result);
});
答案 2 :(得分:1)
我认为.load
可能会给您带来问题,因为您实际上正在重新加载HTML代码的该部分中的整个HTML结构。
我尝试使用.load
方法,而不是使用jQuery.ajax()
。将方法附加到success
选项,该选项获取返回的图像并将其交换到旧图像上。这样,您只是使用CSS来交换图像而不是操纵DOM。