Code provided by your theme not working good anymore

Dear,

https://xtemos.com/forums/topic/lazyload-images-from-mega-menu-2/

In the above ticket, you’ve provided me a custom code so that images from mega menu also get lazyload. However, it doesn’t work good anymore. Images take a LOT of time for getting loaded.

Can you please check what’s going wrong?
Thanks

You can test here on staging, credentials below

Hello,

We are not able to open your staging website. Please, provide us the correct URL.

Kind Regards

It’s also on live site, link below

We don’t see any problems with images in the menu now https://gyazo.com/abeea367c3331b1a02d5db2bb6091c79

Dear,

Please follow PRECISELYthe following steps to reproduce the problem :
1) load the website in private
2) before the page is fully loaded, hover any value of the mega menu

AS IS : the images are not loading if the mega menu is opened BEFORE that the page has fully loaded

TO BE : the images should load whether the user hover BEFORE or AFTER that the page has fully loaded

NB : Make sure to always clear browser cache between each attempt to reproduce it!

Try to replace the code with the following one

jQuery('.whb-navigation li').hover(function() {
   customLazy(jQuery(this));
});
jQuery('.whb-navigation li').on('mousemove',function() {
   customLazy(jQuery(this));
});
function customLazy($this){
    $this.find('.woodmart-lazy-load-custom').each(function() {
        var $img = jQuery(this);
        $img.attr('src', jQuery(this).data('wood-src'));
        $img.addClass('woodmart-loaded');
        var $categories = $img.parents('.categories-masonry');
        if ($categories.length > 0) {
            $categories.imagesLoaded(function() {
                $categories.packery();
            });
        }
    });
}

Regards

Dear,

I’ve added the new custom js. I cleared cache everywhere and enabled DevMode in Cloudfare.

The behavior “seems” better at first sight but still the issue of images not loading still occurs as explained earlier when hovering on menu while page hasn’t fully loaded yet.

Can you recheck please?
Thanks

Yes, you have to move the mouse at least for 1 pixel after page loading to init the JS script. Sorry, but it can’t be better.

Dear,

I am moving the mouse for at least 1 pixel but still it occurs.

– I move the mouse itself on the screen
– I scroll the mouse down the page and back up

And yet the issue is still happening. See the link.

There is some error in your custom scripts that breaks this functionality https://gyazo.com/4bd3e667fa8958767e2f78ba5d55eae3

Hi Artem,

The js code should go in “Global Custom JS” or on “Document ready”?

Thanks

Dear,

Alright I found the plugin that is causing the provided code to not work properly.

> The issue appears when WP Rocket is enabled.
> The issue disappears when WP Rocket is disabled.

After testing, I found that it’s the “Delay JavaScript execution” that is the rootcause.

So I found where the problem is but now I still need your help to know which precise js script of your theme I should exclude from the Delay to allow the correct functionning of this code.

I don’t want to exclude all Woodmart theme js (for performance related reasons). I want to exclude only the script precisely related to this custom code. Can you help to identify which script I should exclude from being delayed?

Staging credentials in private.

Thanks for your help
Gevcen

add_action(
	'woodmart_after_body_open',
	function() {
		remove_action( 'woodmart_attachment', 'woodmart_lazy_attachment_replace', 10) ;
		add_filter('woodmart_attachment', 'woodmart_custom_lazy_attachment_replace', 10, 3);
	}
);
add_action(
	'woodmart_after_header',
	function() {
		add_filter('woodmart_attachment', 'woodmart_lazy_attachment_replace', 10, 3);
		remove_action( 'woodmart_attachment', 'woodmart_custom_lazy_attachment_replace', 10) ;
	}
);
function woodmart_custom_lazy_attachment_replace( $imgHTML, $attach_id, $size ) {
	if ( preg_match( "/src=['\"]data:image/is", $imgHTML ) ) return $imgHTML;
	if( $attach_id ) {
		$lazy_image = woodmart_get_attachment_placeholder( $attach_id, $size );
	} else {
		$lazy_image = woodmart_lazy_get_default_preview();
	}
	return  woodmart_custom_lazy_replace_image( $imgHTML, $lazy_image );
}
function woodmart_custom_lazy_replace_image( $html, $src ) {
	$class = woodmart_custom_lazy_css_class();
	$new = preg_replace( '/<img(.*?)src=/is', '<img$1src="'.$src.'" data-wood-src=', $html );
	$new = preg_replace( '/<img(.*?)srcset=/is', '<img$1srcset="" data-srcset=', $new );
	if ( preg_match( '/class=["\']/i', $new ) ) {
		$new = preg_replace( '/class=(["\'])(.*?)["\']/is', 'class=$1' . $class . ' $2$1', $new );
	} else {
		$new = preg_replace( '/<img/is', '<img class="' . $class . '"', $new );
	}
	return $new;
}
function woodmart_custom_lazy_css_class() {
	$class = 'woodmart-lazy-load-custom';
	$class .= ' woodmart-lazy-' . woodmart_get_opt( 'lazy_effect' );
	return $class;
}

and

jQuery('.whb-navigation li').hover(function() {
   customLazy(jQuery(this));
});
jQuery('.whb-navigation li').on('mousemove',function() {
   customLazy(jQuery(this));
});
function customLazy($this){
    $this.find('.woodmart-lazy-load-custom').each(function() {
        var $img = jQuery(this);
        $img.attr('src', jQuery(this).data('wood-src'));
        $img.addClass('woodmart-loaded');
        var $categories = $img.parents('.categories-masonry');
        if ($categories.length > 0) {
            $categories.imagesLoaded(function() {
                $categories.packery();
            });
        }
    });
}

I forgot to add an information to my previous comment today, please find in private the list of scripts that are currently delayed in WP Rocket. According to you, which one(s) of those scripts should be removed as they can prevent your code to function properly? Thanks

Hello,

All the codes from the list are not related to our theme at all. So it means that any of our theme scripts aren’t delayed at the moment.

Kind Regards

In the meantime I found the script that was causing problem.
You can close this ticket thanks

OK, we are glad that you sorted it out.

[Author]

Posts