以几秒的延迟依次显示图像答案

【问题标题】：Display images one after another with few seconds delay以几秒的延迟依次显示图像
【发布时间】：2018-10-07 11:41:02
【问题描述】：

当用户单击一个按钮时，我想从数据库中显示两个图像。但是第二张图像应该在显示图像 1 延迟 5 秒后显示。我尝试像这样使用sleep(5)

//Image extraction query
$c1 = mysqli_query($con, "") or die (mysqli_query($con));
$c2 = mysqli_fetch_array($c1) or die (mysqli_error($con));
 echo '<div class="col-xs-12">

       <div class="col-xs-5">
<img src='. $c2['bpic'].' /></div>'; // 1st Image
sleep(5);
echo '<div class="col-xs-5">
<img src='. $c2['apic'].' /></div>';

尝试在 jquery 中使用 setInterval 和 load，但它每 5 秒重新加载一次 <div>。

谁能指导我如何做到这一点？

但整个页面要等待 5 秒才能加载。然后两个图像将一起显示。

编辑

javascript

<script type="text/javascript">
   var autoLoad = setInterval(
   function ()
   {
      $('#loadpic').load('load_pic.php?id=<?php echo $id; ?>').fadeIn("slow");
   }, 5000); // refresh page every 5 seconds
</script>

HTML

echo '<div class="col-xs-5" id="loadpic" style="display:none;">
<img src='. $c2['apic'].' /></div>';

【问题讨论】：

请记住 PHP 在服务器上运行并构建您的页面。除了您所说的导致页面加载时间更长之外，您在 PHP 中所做的任何事情都不会导致浏览器上发生的事情发生时间延迟
您的 javascript setInterval() 是正确的方法。所以你最好再问一个问题并显示代码，这样我们就可以看到你做错了什么
setInterval() 只是普通的 javascript，而不是 jquery。如果你希望它只发生一次，你会想使用setTimeout()。 w3schools.com/js/js_timing.asp
@RiggsFolly：我已经编辑了我的代码。这就是我尝试过的，但它每 5 秒重新加载一次。图像显示后它必须停止
您需要单独获取每个图像（为它们单独调用 PHP 文件），或者您需要先隐藏第二个图像，然后在 5 秒后使用 @ 使其可见987654332@。如何显示/隐藏它们取决于您是否希望隐藏的图像占用空间。您当前每 5 秒调用一次函数，加载两个图像。

标签： php jquery mysqli

【解决方案1】：

使用 javascript 进行客户端操作...

对一个事件使用 setTimeout...

  setTimeout(function(){
      $('#img2').show();// or slideDown();  or fadeIn();      
  }, 5000);//wait 5 sec

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="col-xs-12">
   <div class="col-xs-5">
      <img src="https://www.google.ru/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
   </div>
</div>

<div class="col-xs-12" style="display:none;" id="img2">
   <div class="col-xs-5">
      <img src="https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
   </div>
</div>

【讨论】：