[Support request] WooCommerce – Load secondary image upon hover

Home Forums Support WooCommerce – Load secondary image upon hover

  • This topic has 6 replies, 3 voices, and was last updated 1 month ago by Tom.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1416744
    Sammy

    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?

    #1416761
    Tom
    Lead Developer
    Lead Developer

    Hi 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.

    #1417043
    Sammy

    Hi 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 the display: 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.

    #1417272
    David
    Staff
    Customer Support

    Hi 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.

    #1420362
    Sammy

    Thanks 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 a data-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) with document.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 😉

    #1420399
    David
    Staff
    Customer Support

    Thats cool 🙂
    I am sure Tom will be interested in this – thanks for sharing.

    #1420763
    Tom
    Lead Developer
    Lead Developer

    Thanks for this! Will definitely play with it 🙂

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.