Отображать изображения одно за другим с задержкой в ​​несколько секунд

Question

Я хочу отобразить два изображения из базы данных, когда пользователь нажимает кнопку. Но второе изображение должно отображаться после 5 секунд задержки отображения изображения 1. Я попытался использовать 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>';

Пробовал использовать setInterval с load в jquery, но он перезагружает <div> каждые 5 секунд.

Может кто-нибудь подсказать мне, как это сделать?

Но целая страница ожидает загрузки в течение 5 секунд. Тогда оба изображения будут отображаться вместе.

EDIT

1018 * 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>