Archived topic
Single product page > WP native lazy load not applied?
5 replies · Started by Sammy on August 29, 2020
How do I get the native WP lazy load (i'm on WP 5.5) to work on the single product page galleri images?
On my single product page I have 4 images (2 of which are not showing in the viewport) added to the product gallery.
In Appearance > Elements > Gallery Stack
- I've added loading="lazy" manually to the img tag, so that it now prints out:
<img src="product.png" alt="" title="product" loading="lazy">
It had no effect though, so upon page load all 4 images are loaded.
Further down the page there's a section with "related products" -> Lazy loading those works fine (did nothing on this part)
EDIT:
I investigated further and seems you need to add a fixed width + height to the <img> tag before lazy load is recognized, like:
<img src="<?php echo $attachment[0] ; ?>" width="768" height="768" loading="lazy" alt="<?php echo $attachment_alt; ?>" title="<?php echo $attachmnent_title; ?>" />
Sadly I only see the above working in Firefox. Chrome + Edge it's ignored. Perhaps im missing something.
Hi there,
I assume you're using the Niche site? If so, try changing your Gallery Stack hook content to this:
<div class="woo-sumamry-wrap"><!-- open wrap -->
<div class="woo-gallery-stack hide-on-mobile">
<?php
global $product;
// Get post product thumbnail
if ( has_post_thumbnail( $product->get_id() ) ) {
$attachment_ids[0] = get_post_thumbnail_id( $product->get_id() );
$attachment = wp_get_attachment_image_src( $attachment_ids[0], 'full' );
$attachment_alt = get_post_meta( $attachment_ids[0], '_wp_attachment_image_alt', TRUE);
$attachmnent_title = get_the_title( $attachment_ids[0] );
?>
<img src="<?php echo $attachment[0] ; ?>" alt="<?php echo $attachment_alt; ?>" title="<?php echo $attachmnent_title; ?>" width="<?php echo $attachment[1]; ?>" height="<?php echo $attachment[2]; ?>" loading="lazy" />
<?php
}
// Get Product Gallery Images
if ( method_exists( $product, 'get_gallery_image_ids' ) ) {
$product_image_ids = $product->get_gallery_image_ids();
foreach( $product_image_ids as $product_image_id ) {
$image = wp_get_attachment_image_src( $product_image_id, 'full' );
$image_alt = get_post_meta( $product_image_id, '_wp_attachment_image_alt', TRUE);
$image_title = get_the_title( $product_image_id );
echo '<img src="' . $image[0] . '" width="' . $image[1] . '" height="' . $image[2] . '" alt="' . $image_alt . '" title="' . $image_title . '" loading="lazy">';
}
}
// Closing div found in Close Summary Wrap element
?>
</div>According to this, Chrome loads images that aren't visible yet, while Firefox won't. Worth testing on a product with a handful of images to see if the ones further down the page have lazy loading or not.
Thanks for the input Tom - and yup using one of the niche sites.
Reading the stackoverflow topic basically supports my findings tonight aswell.
Lazy load in Firefox is a lot better fine tuned and basically sucks in all other browsers: (nothing to do with your theme/plugin ofcourse!)
- Edge > Didn't lazy load anything
- Firefox > Perfect
- Chrome > Not so good > I added 5 gallery images (6 in total with the main product image). Only two gallery images were lazy loaded. I'm on a 1920x1080px screen.
350px below my initial viewport the second gallery image appears. Firefox starts lazy load from the second gallery image perfectly.
PS. minor thing - there seems to be a typo in one of the variables in that Gallery stack code:
$attachmnent_title = get_the_title( $attachment_ids[0] );
$attachmnent_title
:)
Thanks for the heads up! Will be updating Niche shortly with that fix and the lazy loading fixes.
Hopefully Chrome adjusts that a bit :)
NP at all :)
On the same single product page, I also found another type on a class:
<div class="woo-sumamry-wrap">
I'm fiddling a lot with my niche site, so in case I found more like this, would there be a more appropiate place for me to report things like this? (I know minor non-critical stuff, but never the less)
Thanks again! In the forum is the best place to report things like this - no bug is too minor :)
