- This topic has 6 replies, 3 voices, and was last updated 3 years, 8 months ago by Tom.
-
AuthorPosts
-
August 24, 2020 at 2:27 pm #1416744Sammy
In the Woo > layout settings you can define something like “Show secondary image on hover”.
Is it possible to not have the secondary image load in the DOM pr. default but first load the secondary when the actual hover i happening?
August 24, 2020 at 3:14 pm #1416761TomLead DeveloperLead DeveloperHi there,
Right now it’s set to load the image but have it hidden by default.
Using javascript to fetch the image and load it would definitely be possible, but it would involve some pretty complex javascript.
Are we sure the
display: none
image is being downloaded by the browser when the page loads? If so, this is likely worth exploring in the plugin.August 25, 2020 at 12:15 am #1417043SammyHi Tom,
Do you know where to locate the part printing out the secondary image? (then i’ll see if it can be tampered with)
Is that part Generatepress or WooCommerce specific?Yea, I guess you can “gain” something with
display: none
– however it’s not working 100% reliable cross browser’wise (especially not on mobile).I tested it quick and in Firefox, Chrome and Edge it works,- IE11 loads the images regardless of
display: none
Pr. default the loaded secondary image is hidden with
opacity: 0
– so upon page load, all the hidden secondary images will add up to the page load (I just forced thedisplay: none
with my own CSS) – being quite much if trying to optimize something like page size.An “easy” solution could be to just print the src for the secondary image in a data attribute on the
inside-wc-product-image
container. (or similar)
Then some JS could easily be applied to handle the load.August 25, 2020 at 5:02 am #1417272DavidStaffCustomer SupportHi there,
GP adds the secondary product image like so:
add_action( 'woocommerce_before_shop_loop_item_title', 'generatepress_wc_secondary_product_image' ); /** * Add secondary product image. * * @since 1.3 */ function generatepress_wc_secondary_product_image() { $post_type = get_post_type( get_the_ID() ); if ( 'product' === $post_type && method_exists( 'WC_Product', 'get_gallery_image_ids' ) ) { $product = new WC_Product( get_the_ID() ); $attachment_ids = $product->get_gallery_image_ids(); if ( $attachment_ids && generatepress_wc_get_setting( 'product_secondary_image' ) && generatepress_wc_get_setting( 'product_archive_image' ) && has_post_thumbnail() ) { $secondary_image_id = $attachment_ids['0']; echo wp_get_attachment_image( $secondary_image_id, 'shop_catalog', '', $attr = array( 'class' => 'secondary-image attachment-shop-catalog' ) ); } } }
You can always unhook that and hook in your own function.
Just a note the image has these two classes:
secondary-image attachment-shop-catalog
which you could target with your own JS.August 27, 2020 at 6:56 am #1420362SammyThanks David!
That helped me a lot.
I managed to unhook the function and re-add it to my likings.
Basically I echo’ed out the complete secondary image into a fake
<span>
container with adata-src
attribute, like;<span class="secondary-image-src" data-src="<img width='400' height='400' src='Poster_4_flat-1-400x400.jpg' class='secondary-image attachment-shop-catalog' alt='' loading='lazy' srcset='Poster_4_flat-1-400x400.jpg 400w, Poster_4_flat-1-100x100.jpg 100w, Poster_4_flat-1-600x600.jpg 600w, Poster_4_flat-1-300x300.jpg 300w, Poster_4_flat-1-150x150.jpg 150w, Poster_4_flat-1-768x768.jpg 768w, Poster_4_flat-1.jpg 1000w' sizes='(max-width: 400px) 100vw, 400px' /> "></span>
From there I could implement whatever JS logic needed, but what I did was:
– Upon
<li>
product mouseover, get the corresponding data-src string
– prepend the string (= image) withdocument.target.querySelector('.inside-wc-product-image').insertAdjacentHTML('afterbegin', getDataString);
From there CSS toggles visibility of the secondary image.
So the secondary image now only loads when the user actually hovers the product
<li>
.
Saved me about 500kb upon page load!You guys have such an optimized theme towards speed, so eliminating something like loading loads of KB for hidden secondary images would be such an easy boost π
My solution is messy,- i’m sure you could do it A LOT cleaner π
August 27, 2020 at 7:15 am #1420399DavidStaffCustomer SupportThats cool π
I am sure Tom will be interested in this – thanks for sharing.August 27, 2020 at 9:36 am #1420763TomLead DeveloperLead DeveloperThanks for this! Will definitely play with it π
-
AuthorPosts
- You must be logged in to reply to this topic.