php - 使用 AJAX/jQuery 刷新图像

Question

这可能是一个简单的问题，但我很困惑，只是不知道从哪里开始。

我有一个 PHP 脚本 (image_feed.php)，它返回图像的 URL。每次调用此 URl 时，它都会返回最新的可用图像(图像每两秒更改一次)。

我想要发生的是，当页面加载时，有一个对 image_feed.php 的 AJAX 调用，它返回最新的 url。然后将此 URl 插入到 HTMl 中，替换适当的图像 src。

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，预加载它，然后将它与现有图像交换。

然而，我仍然在努力去任何地方。有人可以给我一些指示/帮助吗？

Answer 1

$(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 事件。