WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm using a theme called Hatch Pro, which is a gallery based theme and the index page displays the posts using the featured image. You can see it here.

On slower browser environments, the images sort of load in a jumpy manner. In this situation, I'd like them to load with a smoother transition (see example) or preload, so they all are ensured to appear at the same time. The theme author mentioned Lazy Load, but I'm not sure how I would implement that and would welcome any direction. I don't necessarily need them all to load at the same time (as the list of posts will continue to grow), but at least the images being viewed on the screen at the time of loading.

I'm comfortable with CSS, but very novice with PHP or other heavier coding.

share|improve this question
Side note: make sure the theme is not printing styles and scripts all over the admin area. I had to do this with one of their themes. – brasofilo Jan 4 '13 at 19:45
Thanks, brasofilo! The theme that I'm actually using is by alienwp, so I'm assuming that wouldn't be an issue with my theme. I was just using the themezilla example to demonstrate how the thumbnails appear more gradually. – Dave Jan 4 '13 at 20:01

You can set the opacity of all those images to 0, and use jQuery to fadeIn after the images have loaded.

$('img.archived-thumbnail-4').load(function(e) {

Note: This is just a snippet I quickly put together after looking at your code. You may need to correct it. Also, I hope you are familiar with jQuery and javascript.

share|improve this answer
Thanks, I think this would work nicely, but I'm not familiar enough with jQuery and javascript to fully implement this. Would I add this code to the functions.php file? And if so, would I need to add code to wrap around it ie., function fade_in_effect() {your code} ? – Dave Jan 17 '13 at 6:51
Hmm. It depends on how your theme code is structured really. There are many places where you can put it (TWSS). One simple place would be to put it in a javascript script tag in your HTML code somewhere, probably the header (after the jquery script tag). Also, you may have to use jQuery instead of $. – Munim Jan 17 '13 at 13:50
Munim, IMHO, it would be better to offer a full, and even short, WordPress solution: wp_enqueue_scripts. :::: @Dave, jQuery image preloader – brasofilo Feb 17 '13 at 5:43

Lazy Load really does not require no coding, you can use the Lazy Load plugin (just activate it).

I also suggest providing different thumbnail sizes on the basis of the required dimension for the position (and you could even deliver them differently on the basis of the screen size, if you wish, to allow rensponsive themes work well).

Other ideas can be stripping images info (use a software before uploading), optimize their size (i.e. EWWW Optimizer), activate caching, enabling a CDN...

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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