how to show spinner/loader while images are loading

I am displaying images in a modal by calling this script which just shows all the images from a specific folder. The issue is that on a live server some of the images load slowly because they are large. What would be the best way to have a pre-loader or spinner where each image is until the image is fully loaded. Then the spinner should disappear and be replaced with the image.

$files = glob('uploads/*.jpg');
$i=1;
foreach($files as $f) {
	$name_only = basename($f);
	$id = "image_" . $i++;
	echo <<< CELL
		<div class="col-md-3 img-box">
			<input type="checkbox" id="{$id}" name="pics[]" value="{$name_only}" data-id="{$id}"/><label for="{$id}" style="background-image: url({$f})">
			<i class="glyphicon glyphicon-ok"></i>
			</label>
		</div>
CELL;
}

Open in new window

LVL 1
Black SulfurAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You need to use an ajax call.  In short, when you click a button to start the upload, before the ajax is called, you can start your animation, then after the ajax process is complete, remove the animation.

It is worth looking into a jquery plug in such as https://blueimp.github.io/jQuery-File-Upload/basic-plus.html. You will see there is a progress bar that gets called.

 .on('fileuploadprogressall', function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .progress-bar').css(
            'width',
            progress + '%'
        ); 

Open in new window

There is some specific php code that you can look at too https://github.com/blueimp/jQuery-File-Upload/wiki

http://www.dropzonejs.com/ is similar.
0
Black SulfurAuthor Commented:
Thanks Scott, this isn't for image upload, but just showing images that are in a folder. So, I am just using this code to say it must show all files with .jpg extension

$files = glob('uploads/*.jpg');

Open in new window


But some of the images are 2mb-4mb in size and they take long to load. So, instead of the image slowly loading, I wanted to just show a spinner gif where the image is until it has fully loaded or downloaded.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
See if something like this does the trick.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>test</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
 <script> $(function(){
    
   $('img#abc').attr('src','/images/large_image.jpg');
   });</script>
  </head>
<body>

<img id="abc" class="ajaximage" src="/images/spinner.png">
</body>
</html>

Open in new window

0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Black SulfurAuthor Commented:
Sorry, I think I am giving you half a story again.

As per the original question, this is the code for get-images.php

$files = glob('uploads/*.jpg');
$i=1;
foreach($files as $f) {
	$name_only = basename($f);
	$id = "image_" . $i++;
	echo <<< CELL
		<div class="col-md-3 img-box">
			<input type="checkbox" id="{$id}" name="pics[]" value="{$name_only}" data-id="{$id}"/><label for="{$id}" style="background-image: url({$f})">
			<i class="glyphicon glyphicon-ok"></i>
			</label>
		</div>
CELL;
}

Open in new window


And it is displayed via this call below:

$.get('get-images.php', function (data) {
 $('#gallery-body').html(data);
});

Open in new window


Not really sure how to merge your code with this?
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You want to change the default background image to your animation. Then use jquery to replace. It would be better if you didn't set the style inline.

Make your rendered html like thi
<style>
/* This will default the background image to your animation */
label.spinner {background-image: url("spinner.png");}
</style>
<script>
$(function(){
      $('label#labelabc123').attr('src','/images/large_image_named_labelabc123.jpg');
  });
</script>
</script>
<div class="col-md-3 img-box">
     <input type="checkbox" id="abc123" name="pics[]" value="name" data-id="abc123"/><label id="labelabc123" class="spinner" for="abc123">
          <i class="glyphicon glyphicon-ok"></i>
     </label>
</div>

Open in new window


Keep in mind your php runs on the server. It renders the code in the browser. All we are concerned about is getting the html, css and js right. From there you can use php to generate the required js and html.   For the php, you can just generate the needed jquery and html in the same loop and place it in the appropriate place. If you are doing this procedurally, just run your code above the html tag, then you can save the code to a variable and echo the variable.

In other words instead of
echo <<< CELL
// some code
CELL;

Open in new window

<?php
$jquery= <<< JS
// some code
JS;
$html= <<< CELL
// some code
CELL;
?>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>test</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
 <script> $(function(){
    <?php echo $jquery; ?>
   });</script>
  </head>
<body>
<?php echo $html; ?>
</body>
</html>

Open in new window


Before getting into the php portion, test it with sample html first.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Black SulfurAuthor Commented:
Thank you!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.