使用AJAX / jQuery来刷新图像

问题描述

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

我有一个PHP脚本（image_feed.php）返回一个URL到图像。每到这个URL被称之为返回可用的最新图像（图像变化，每几秒钟）。

我希望发生的是，在页面加载时，有一个AJAX调用image_feed.php，返回最新的URL。这个URL，然后插入到HTML取代适当的图像SRC。

在5秒，我想的过程重复，并且对于图像更新。不过，我不希望图像被换，直到它完成加载，和我想避免一个空格出现新的图像加载之前。

目前，我有以下jQuery的，它只是加载image_feed.php的返回值直接进入一个div叫＃此搜索。 image_feed.php格式正确无误，以提供一个HTML图像标记。

  $（文件）。就绪（函数（）{
    变量$箱= $（＃此搜索）;
    $ container.load（'image_feed.php CAMERA_URI =＆LT;？？= $ camera_uri;？＆GT;'）
    VAR refreshId =的setInterval（函数（）
    {
        $ container.load（'image_feed.php CAMERA_URI =＆LT;？？= $ camera_uri;？＆GT;'）;
    }，5000）;

}）;
 

这个工作，但有一个问题。我得到一个白色的空间中的每个图像刷新时间的图像在IE和Firefox的大小，因为图像需要一段时间才能下载。

我知道我需要是image_feed.php到平原网址返回图像。然后，我用一些jQuery请求此URL，pre-加载它，然后与现有的图像交换它。

不过，我仍然在努力取得任何进展。可能有人会这么好心给我一些指点/帮助？

解决方案

  $（文件）。就绪（函数（）{
    变量$ IMG = $（'＃此搜索'）;
    的setInterval（函数（）{
        $获得（'image_feed.php CAMERA_URI =＆LT;？？= $ camera_uri;？＆GT;'，功能（数据）{
            变量$装载机= $（document.createElement方法（'IMG'））;
            $ loader.one（'负荷'，函数（）{
                $ img.attr（'src'中，$ loader.attr（SRC））;
            }）;
            $ loader.attr（'src'中，数据）;
            如果（$ Loader.complete可以）{
                $ loader.trigger（'负荷'）;
            }
        }）;
    }，5000）;
}）;
 

检验。 code以上应加载新的图像中的背景，然后将旧的图像的src属性上的负担。

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

This is probably a simple question but I am stumped and just don't know where to start.

I have a PHP script (image_feed.php) that returns a URL to an image. Every time this URl is called it returns the latest image available (the image changes every couple of seconds).

What I want to happen is that when the page loads, there is an AJAX call to image_feed.php, which returns the latest url. This URl is then inserted into the HTMl replacing the appropriate image src.

After 5 seconds, I want the process to repeat, and for the image to update. However, I don't want the image to be swapped until it has finished loading, and I want to avoid a white space appearing before the new image loads.

At the moment I have the following jQuery, which simply loads the return value of image_feed.php directly into a div called #image1. image_feed.php is correctly formatted to provide a html image tag.

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

});

This works, but there is a problem. I get a white space the size of the image in IE and Firefox every time the image refreshes, because the image takes a while to download.

I know what I need to is for image_feed.php to return the plain URL to the image. I then use some jQuery to request this URL, pre-load it and then swap it with the existing image.

However, I'm still struggling to get anywhere. Could someone be so kind as to give me some pointers / help?

解决方案

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

Untested. Code above should load the new image in the background and then set the src attribute of the old image on load.

The event handler for load will be executed only once. The .complete check is necessary for browsers that may have cached the image to be loaded. In such cases, these browsers may or may not trigger the load event.

这篇关于使用AJAX / jQuery来刷新图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！