Question

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

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

我想要发生的是，当页面加载时，会有一个对image_feed.php的AJAX调用，它会返回最新的url。然后将该URl插入到HTM1中，替换适当的图像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

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

Answer 3

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

Answer 4

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

当您从服务器收到新的图片网址时，您会使用<img创建一个新的src="new_url_from_server"对象并附加'onImagesLoad'回调。调用回调后，您的图像已完成下载。

现在你可以用new_url_from_server替换旧img对象的'src'属性。由于新图像已在缓存中可用，因此不会再次下载并立即显示！

另外，您可以隐藏旧图像并将此新图像添加到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>

使用AJAX / jQuery刷新图像

4 个答案: