3

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

我有一个返回图像 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，预加载它，然后用现有的图像交换它。

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

4

4 回答 4

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

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

于 2012-06-06T19:30:50.383 回答
3

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

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

初始代码：

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

希望这可以帮助！:)

于 2012-06-06T19:09:41.013 回答
1

考虑一下，如果您必须再次从服务器获取 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.
?>
于 2012-06-06T19:27:54.030 回答
0

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

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

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

Aletrnatively，您可以隐藏旧图像并将此新图像添加到 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>
于 2012-06-06T19:34:57.090 回答