使用AJAX / jQuery刷新图片

Question

使用AJAX / jQuery刷新图片

phpjqueryhtmlajax

3

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

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

我希望发生的是，在页面加载时，有一个AJAX调用image_feed.php，它返回最新的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，预加载它，然后将其与现有图像交换。

然而，我仍然在努力中，能否有人友善地给我一些指导/帮助？

- dopey

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

- Finbarr

好的回答，但如果加载图像需要几秒钟，这种方法就行不通了。也许可以在onload之后使用setTimeout（而不是setInterval），在一个调用自身的函数中？ - darma

这个立刻就完美地运行了！太棒了！现在我只需要稍微编辑一下它，使得在加载第一张图片之前不必等待5秒钟。谢谢！ - dopey

@darma 这确实是一个问题。然后你必须处理下一张图片永远不加载的问题，但这很容易解决。 - Finbarr

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.
?>

- Praveen Kumar Purushothaman

谢谢Praveen - 这就是我整天想要实现的，现在开始有点明白了。 - dopey

0

我建议您使用jQuery 'onImagesLoad' Plugin，这将为您提供一个回调函数，当图像加载完成时会调用该函数。

当您从服务器接收到新的图像URL时，您可以创建一个新的<img对象，并将src="new_url_from_server"附加到它上面，并将'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>

- vivek.m

谢谢您的回答。我之前确实尝试过这个插件，但不确定如何使用回调功能。现在我明白了 - 非常感谢。 - dopey

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Praveen Kumar Purushothaman · Accepted Answer

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

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

初始代码：

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

希望这能帮到你！ :)