0

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?

2 Answers 2

0

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.

1
  • Absolutely brilliant! Simple and clean. Thank you so much!
    – Mupetz
    Jan 10, 2014 at 12:01
0

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/

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.