Help adding loading icon whilst content is loading on a page

You can do something like this.
Put your images in a container and give it a class - in my example I have put a div with class load-container around the image like so

<div class="load-container"><img src="getImage.php?img=foreground1.png"/></div>

Select allOpen in new window

Add styling to give the container a size and a loading image

<style type="text/css">
.load-container {
	width: 200px;
	height: 150px;
	background: url(images/loading.gif) no-repeat;
	background-size: contain;
}
</style>

Select allOpen in new window

Use this script to trigger on the load and remove the container class so that the image shows.

<script>
$(function() {
	$('.load-container img').load(function() {
		$(this).parent().removeClass('load-container');
	});
});
</script>

Select allOpen in new window

Working sample here
In my sample I use a script to load the image to simulate a delay in loading

Amendment to the above. The above script will not fire if the image is in cache.
This script checks to see if the image is in cache

<script>
$(function() {
  $('img').each(function(i,e) {
    $(e).load(function() {
      $(e).parent().removeClass('load-container');
    });
    if (this.complete) $(e).parent().removeClass('load-container');
  });
});
</script>

Select allOpen in new window

Updated sample here

Hi thanks so much for the feedback, looking into this now...

Hi

Instead of using:  <div class="load-container"><img src="getImage.php?img=foreground1.png"/></div>

Can I use the grid that is there... #grid or the class .grid-wrap instead of creating container..I assume this should work..anyways testing it now and will revert back

Can I use the grid that is there

Yes - it can be any container.

Hi,

Sorry for delay in getting back...

Tried solution but this has not worked..created a class .grid-load

<div class="grid-load"></div> added on page... and on same i also added in header css and jquery

.grid-load { width: 200px; height: 150px; background: url('http://datainflow.com/wp-content/uploads/2017/09/loader.gif') no-repeat; background-size: contain; }

<script>
$(function() {
  $('img').each(function(i,e) {
    $(e).load(function() {
      $(e).parent().removeClass('grid-load');
    });
    if (this.complete) $(e).parent().removeClass('grid-load');
  });
});
</script>

The loading icon is not appearing and still appears to work the same, must be doing something wrong?

Please check this link:  https://www.stockimagesafrica.com/downloads/category/southern-africa/

I can't see any grid-load class on that page? The CSS and script are there but neither the images nor their containers have the class.

Hi Julian Hansen,

I had to revert the changes as I added grid-load, the grid-load div and styling changed the entire layout, and made my images fall within 200px width..something I must have been doing wrong...

<section class="grid-wrap childcat">
            <div class="grid-load">
                <ul class="grid swipe-down" id="grid">
                    <?php
                    $i = 1;
                    while ($the_query->have_posts()) : $the_query->the_post();
                        $i = $i + 1;
                        $termsArray = get_the_terms($post->ID, "download_category");  //Get the terms for this particular item
                        $termsString = ""; //initialize the string that will contain the terms
                        foreach ($termsArray as $term) { // for each term 
                            $termsString .= $term->slug . ' '; //create a string that has all the slugs 
                        }

                        $image_id = get_post_thumbnail_id();
                        $image_url = wp_get_attachment_image_src($image_id, 'medium');
                        $image_url = $image_url[0];

                        if ($i === 6) {
                            $terms = get_terms('download_category', array('child_of' => $term_id));
                            $_SESSION['terms'] = $termsString;

                            //load_more_button();
                            //do_shortcode('[ajax_load_more repeater = "default" post_type="download" posts_per_page="6" taxonomy="download_category"  taxonomy_terms="' . $queried_object->slug . '" button_label="Load More" button_loading_label="Loading..." transition_speed="100"]');   
                        }
                        ?>
                        <li>

                            <div class="edd_download_inner">
                                <div class="edd_download_image">
                                    <a title="<?php the_title(); ?>" href="<?php the_permalink(); ?> ">
                                        <img width="150" height="150" sizes="(max-width: 150px) 100vw, 150px" srcset="<?php echo $image_url; ?>" product_main="" alt="" class="attachment-150x150 size-150x150 wp-post-image" src="<?php echo $image_url; ?>"></a>
                                    <div class="stocky_hover_details ">
                                        <a title="<?php the_title(); ?>" href="<?php the_permalink(); ?> "><div class="stocky_hover_lines">
                                                <center><span class="dcs_view_details"><?php the_title(); ?></span></center>
                                            </div></a>
                                    </div>
                                </div>
                            </div>

                        </li>
            <?php
        endwhile;
        ?>
                </ul> <!-- end isotope-list -->
                   </div> <-- End of grid-load  css-->>
            </section>
      <?php }else {
          echo '<h4>No Record Found</h4>';
      }  

Select allOpen in new window

You appear to be adding the class to the container for all images not the individual images themselves

Try putting the class here

<a title="<?php the_title(); ?>" href="<?php the_permalink(); ?> " class="grid-load">
                                        <img width="150" height="150" sizes="(max-width: 150px) 100vw, 150px" srcset="<?php echo $image_url; ?>" product_main="" alt="" class="attachment-150x150 size-150x150 wp-post-image" src="<?php echo $image_url; ?>"></a>

Select allOpen in new window

The jQuery works on the premise that each img has an immediate parent container with the specified class - not an all encompassing class that spans all the images.

Noted.  The thing is..I dont need it on each image...as they is a infinite scroll js with loading...just on initial load, need to display the loading icon, until the images begin to load.  Hope I making sense?

Doesn't matter - the images that are part of the initial load need the parent setup as I described.

Hello, tried that and it didnt work, let me know when you are next online and maybe can look at this, have had to revert back as its live

I can re-input the code, but would have to take it down soon after