Sharing some useful tips, solutions and notes for Geeks.

Thursday, April 19, 2018

Magento 2 product page image loading slow issue

Those who works on Magento 2 may find its annoying that the product page image loader keeps loading till the whole image is fetched.

But users wont have that much patience to wait till the image load.

So better way, i thought it would be better to load the product image itself instead of loader, and once the js/image loaded its shown after replacing this.

good idea, right?

Now we can implement this.

Just go to the file: /vendor/magento/module-catalog/view/frontend/templates/product/view/gallery.phtml and move it to your theme child folder. If your theme have this file, take that please.

Now see:


Remove the loader image from there.

Then amend below code at the top:


<?php

$product = $block->getProduct();
$imageHelper = $this->helper('Magento\Catalog\Helper\Image');

if (!$product->getImage() || $product->getImage() == 'no_selection') {
    $image = $imageHelper->getDefaultPlaceholderUrl('image');
} else {
    $image = $imageHelper->init($product, 'product_page_image_medium')
            ->constrainOnly(true)->keepAspectRatio(true)->keepFrame(false)
            ->setImageFile($product->getImage())
            ->getUrl();
}
?>

And from in place of remove loader image, please add

<img src="<?php echo $image; ?>" >

Cache clean and see how it goes.

Now in the place of loader, the product image itself is showing.

You can change whether to keep aspect ratio, frame etc in the above code.

Happy coding.

1 comment:

Gino Leo said...

I really enjoyed very much with this article here. Really it is an amazing article I had ever read. I hope it will help a lot for all. Thank you so much for this amazing posts and please keep update like this excellent article.
magento specialists