Tell me more ×
WordPress Answers is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.
up vote 0 down vote favorite

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 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 at 20:01

1 Answer

up vote 0 down vote

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) {
    $(this).fadeIn();
});

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 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 at 13:50
2  
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 at 5:43

Your Answer

 
discard

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.