保持旧图像,直到新图像准备更新

时间:2010-02-23 19:39:18

标签: javascript jquery html ajax

我正在使用setInterval和jQuery加载函数来定期更新图像标记。

var refresh_days = setInterval(function() { 
  $('#box_name').load("dynamic.php");}, 1000 );

这样可行,但在新图像完全加载之前会有一点延迟,在此期间不会显示任何内容。

有没有办法我可以等到新图像完全加载,然后显示它,以便图像从用户的角度瞬间改变?

我的目标浏览器是Chrome,我不需要它与IE兼容。

谢谢,

3 个答案:

答案 0 :(得分:5)

您可以将图片加载到不可见的<img>标记中,并使用“加载”事件来更新可见的标记。

$('#hiddenImage').attr('src', newImageUrl).load(function() {
  $('#realImage').attr('src', newImageUrl);
});

这样你知道它在缓存中,因此对可见图像的更新应该非常快。

如果你正在重新加载一大块东西,那么你就会遇到问题因为“加载”操作会更新页面而然后浏览器会启动HTTP事务来满足<img>标记中的隐式“GET”请求。因此,你可以做的是:

  1. 将整个blob加载到隐藏的<div>
  2. 让live()处理程序等待隐藏div中图像标记的“load”事件;
  3. 通过将DOM子树从隐藏的div移动到您真正想要的位置来对“load”事件做出反应。

答案 1 :(得分:2)

尝试使用get方法......

$.get("dynamic.php", function(result){
                $("#box_name").replace(result);
            });

答案 2 :(得分:1)

我认为.load可能会给您带来问题,因为您实际上正在重新加载HTML代码的该部分中的整个HTML结构。

我尝试使用.load方法,而不是使用jQuery.ajax()。将方法附加到success选项,该选项获取返回的图像并将其交换到旧图像上。这样,您只是使用CSS来交换图像而不是操纵DOM。

请查看http://docs.jquery.com/Ajax/jQuery.ajax#options以获取更多信息。