图像加载时间延迟


Image load time delay

这个脚本工作,它加载在我的图像。

我想这个加载在一个新的图像说10秒后,当我尝试这个不工作的任何建议我做错了什么?

    <?php header("Refresh: 5; URL=mytestfile.php"); ?>
<div style="width: 964px;">
<div style="float: left; width: 240px;">
<?php $mybanners[1] = '<a href="/chiropractor/"><img src="banners/chiropractor.jpg"></a>';
$mybanners[2] = '<a href="/chiropodist/"><img src="banners/chiropody.jpg"></a>';
$mybanners[3] = '<a href="/fitness-instructor/"><img src="banners/fitness ball.jpg"></a>';
$mybanners[4] = '<a href="/dietician/"><img src="banners/Dietician.jpg"></a>';
$mybanners[5] = '<a href="/alexander-technique/"><img src="banners/Alexander technique.jpg"></a>';
$id = rand(1,5);
echo $mybanners[$id]; 
// this is the section I tried to control the delay
$mybanners = 0;
for($i=0; $i<10000; $i++){
if($i=='10000'){
    $mybanners++;
    $i = 0;
    }
    if($mybanners=='10'){
    $mybanners=0;
 }
}?>

你不能通过PHP控制这个,这是一个Javascript用例。for不是与时间相关的控制:http://php.net/manual/en/control-structures.for.php

你应该在Javascript中有一个图像列表:

var myImages = [
  '<a href="/chiropractor/"><img src="banners/chiropractor.jpg"></a>',
  '<a href="/chiropractor/"><img src="banners/chiropractor.jpg"></a>',
  '<a href="/chiropractor/"><img src="banners/chiropractor.jpg"></a>',
  '<a href="/chiropractor/"><img src="banners/chiropractor.jpg"></a>',
];

(当然你可以用PHP生成这个列表)

然后,每隔10秒,对它做一些事情:

var i = 0;
window.setInterval(function() {
  alert(myImages[i]);
  i++;
, 10000}

PHP如果用于生成页面,那么在页面被提供给客户端之后,它就无能为力了。

如果你试图使用Refresh头循环,那么不需要循环。
此外,数到10000并不需要10秒。你使用之前的url数组作为索引。简而言之,重新构建它。

如果你想在浏览器中旋转url列表,让javascript可以使用它们。

编辑:添加示例

1)让javascript可以使用url:

在php中,你输出javascript:

echo "<script>";
echo "var urlList = new Array();";
foreach ($urls as $url)
  echo "urlList[urlList.length]='$url';";

2)旋转它们这是每5秒运行一次函数的基本结构:

setTimeout(function() {}, 5000);

你需要找出一种方法来做旋转:要么保持一个计数器的数组索引或尝试一个随机的:

setTimeout(function() {
  var index = Math.round(Math.rand * urlList.length);
  document.getElementById('#myimg').src.href=urlList[index];
}, 5000);

注意:我在这里写这段代码,它没有经过测试,但它应该足以让你开始。一旦开始使用,请考虑使用一些jQuery。褪色的转变。