- This topic has 5 replies, 2 voices, and was last updated 3 years, 7 months ago by Tom.
-
AuthorPosts
-
August 29, 2020 at 8:13 am #1423066Sammy
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.
August 29, 2020 at 1:49 pm #1423368TomLead DeveloperLead DeveloperHi 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.
August 29, 2020 at 2:45 pm #1423402SammyThanks 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
π
August 30, 2020 at 9:49 am #1424109TomLead DeveloperLead DeveloperThanks for the heads up! Will be updating Niche shortly with that fix and the lazy loading fixes.
Hopefully Chrome adjusts that a bit π
August 31, 2020 at 12:38 am #1424623SammyNP 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)
August 31, 2020 at 9:52 am #1425414TomLead DeveloperLead DeveloperThanks again! In the forum is the best place to report things like this – no bug is too minor π
-
AuthorPosts
- You must be logged in to reply to this topic.