Question

我想在用户点击按钮时显示来自数据库的两个图像。但是在显示图像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>';

Answer 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>

一个接一个地显示图像，延迟几秒钟

1 个答案: