使用 AJAX / jQuery 刷新图像

Question

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

我有一个返回图像 URL 的 PHP 脚本 (image_feed.php)。每次调用此 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

你可以。当您想重新加载某些内容时，您只需附加一个搜索查询，以便刷新源。

例如，当有一个经常变化的图像（比如验证码）并且你想重新加载它，而不刷新浏览器，你可以这样做：

初始代码：

<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());

希望这会有所帮助！ :)

Answer 2

我建议你使用jQuery 'onImagesLoad' Plugin 这会在图像加载完成时为您提供回调。

当您从服务器接收到新的图像 URL 时，您会创建一个带有 src="new_url_from_server" 的新 <img 对象并将 'onImagesLoad' 回调附加到它。当您的回调被调用时，您的图像已完成下载。

现在您可以将旧 img 对象的 'src' 属性替换为 new_url_from_server。 由于新图片已经在缓存中可用，所以不会再次下载，会立即显示！

另外，您可以隐藏旧图像并将此新图像添加到 DOM（如果上述工作正常，则不需要）

一些简单的骨骼样本可能是这样的：

<!DOCTYPE html> 
<html> 
<body> 
<img id='bla' src="10.jpg" />

<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jquery.onImagesLoad.js"></script> 
<script type="text/javascript"> 
    $(function(){ 
        var img = $('<div><img src="http://myserverbla/images/verybig.jpg"></img></div>');
        img.onImagesLoad({ 
                all : allImgsLoaded 
            });

        function allImgsLoaded($selector){ 
            var allLoaded = ""; //build a string of all items within the selector 
            $selector.each(function(){ 
                $('#bla').attr('src','http://myserverbla/images/verybig.jpg');
            }) 
        } 
    }); 
</script> 

</body> 
</html>

Answer 3

$(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 属性。

加载的事件处理程序将只执行一次。 .complete 检查对于可能缓存了要加载的图像的浏览器是必需的。在这种情况下，这些浏览器可能会也可能不会触发load 事件。

Answer 4

考虑一下，如果您必须再次从服务器获取 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.
?>