使用AJAX / jQuery刷新图像
这可能是一个简单的问题，但我被难住了，不知道从哪里开始。
我有一个返回图像URL的PHP脚本(image_feed.php)。每次调用此URl时，它都会返回可用的最新图像(图像每隔几秒钟更改一次)。
我想要发生的是，当页面加载时，有一个对image_feed.php的AJAX调用，它返回最新的url。然后，该URl被插入到HTMl中，以替换适当的图像源。
5秒后，我希望重复此过程，并更新图像。但是，我不希望在完成加载之前交换图像，并且我希望避免在新图像加载之前出现空白。
目前，我有以下jQuery，它只是将image_feed.php的返回值直接加载到名为#image1的div中。image_feed.php被正确格式化以提供html图像标签。
$(document).ready(function(){
var $container = $("#image1");
$container.load('image_feed.php?CAMERA_URI=<?=$camera_uri;?>')
var refreshId = setInterval(function()
{
$container.load('image_feed.php?CAMERA_URI=<?=$camera_uri;?>');
}, 5000);
}); 这是可行的，但有一个问题。每次图像刷新时，我都会在IE和Firefox中看到图像大小的空白区域，因为图像需要一段时间才能下载。
我知道我需要做的是让image_feed.php返回图像的普通URL。然后，我使用一些jQuery来请求这个URL，预加载它，然后与现有图像交换它。
然而，我仍然在努力取得任何进展。有没有人能给我一些指点/帮助？
回答 4
Stack Overflow用户
发布于 2012-06-07 03:30:50
$(document).ready(function() {
var $img = $('#image1');
setInterval(function() {
$.get('image_feed.php?CAMERA_URI=<?=$camera_uri;?>', function(data) {
var $loader = $(document.createElement('img'));
$loader.one('load', function() {
$img.attr('src', $loader.attr('src'));
});
$loader.attr('src', data);
if($loader.complete) {
$loader.trigger('load');
}
});
}, 5000);
});未经测试。上面的代码应该在后台加载新图像，然后在加载时设置旧图像的src属性。
load的事件处理程序将只执行一次。对于可能已缓存要加载的图像的浏览器，.complete检查是必需的。在这种情况下，这些浏览器可能会也可能不会触发load事件。
Stack Overflow用户
发布于 2012-06-07 03:09:41
你可以的。当您想要重新加载某些内容时，您可以只附加一个搜索查询，这样它就可以刷新源代码。
例如，当有一个频繁变化的图像(比如验证码)，而你想重新加载它，而不需要刷新浏览器时，你可以这样做：
初始代码：
<img src="captcha.png" alt="captcha" />刷新代码：
<img src="captcha.png?1" alt="captcha" />这里使用的脚本应该是：
var d = new Date();
$('img').attr('src', $('img').attr('src') + '?_=' + d.getMilliseconds());希望这能有所帮助！:)
Stack Overflow用户
发布于 2012-06-07 03:27:54
考虑一下，如果您必须再次从服务器获取URL，对于新的图像URL，您可以这样做：
$.ajax({
url: 'getnewimageurl.php',
success: function(data) {
$('img').attr('src', data);
}
});服务器应该只在其中返回一个新的图像名称。例如，PHP代码应该是这样的：
<?php
$images = array("jifhdfg", "jklduou", "yuerkgh", "uirthjk", "xcjhrii");
die($images[date('u') % count($images)] . ".png"); // Get the random milliseconds mod by length of images.
?>https://stackoverflow.com/questions/10920514
复制相似问题
腾讯云开发者
