这可能是一个简单的问题,但我很困惑,只是不知道从哪里开始。
我有一个PHP脚本(image_feed.php),该脚本返回图像的URL。每次调用此UR1时,它都会返回可用的最新图像(该图像每隔几秒钟更改一次)。
我想发生的是,当页面加载时,有一个对image_feed.php的AJAX调用,该调用返回了最新的URL。然后将该UR1插入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,对其进行预加载,然后将其与现有图像交换。
但是,我仍然在努力达到目标。有人能给我一些帮助吗?
$(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事件,也可能不会触发事件。
.complete
load