Display images one after another with few seconds delay - php

Question

I want to display two images from database when user clicks a button. But 2nd image should display after 5 seconds of delay of displaying image 1. I tried using sleep(5) like this
//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>';
Tried using setInterval with load in jquery but it reloads the <div> every 5 seconds.
Can somebody guide me how to do this?
But whole page waits for 5 seconds to load. Then both the images will display together.
EDIT
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

Use javascript for client-side manimulation...
Use setTimeout for one event...
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>