asked on

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

Scott Fell

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.

Crazy Horse

ASKER

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.

Scott Fell

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

Crazy Horse

ASKER

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?

ASKER CERTIFIED SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Crazy Horse

ASKER

Thank you!