Display ajax preloader for large images within posts

Question

Our WordPress installation runs only images within posts. Generally medium, lightweight images but we are also publishing larger images, sometimes gif animations which take enormous time to load.

When a post has a description it is a bit different. The visitor has something to read and then the images pops out when loaded but that's not our case. As I said, we only display images within our posts.

When a post contains a big image, it is simply empty until the image is loaded, and I believe we are loosing a lot of possible future regular visitors because of this. They could believe we have empty pages.

My solution would be to display a tiny (ajax?) preloader until the image is loaded, so the visitor is notified that some content is being loaded. How can I achieve this?

Answer 1

How you said one option is to place a preloader while the image is loading.

If you cannot touch so deep with JavaScript and PHP I have one simple sugestion which I think will work for you.

<div class="image-preloader">
   <img src="yourimage.jpg" alt="" />
</div>

Create a wrapper (holder) around your image. With CSS put the preloader as a background on the HOLDER DIV.

.image-preloader {
  background('images/loader.gif') 50% 50%;
}

Like that while the image is loading you will have your preloader and when the Image is loaded it will be hidden under it.

Answer 2

You can check here a lot of JQ plugins to do that.

http://www.jquery4u.com/plugins/preload-image-plugins/

For example, this one:

http://nick-jonas.github.io/imageloader/