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.

8 comments:

shri yadav said...

All are saying the same thing repeatedly, but in your blog I had a chance to get some useful and unique information, I love your writing style very much, I would like to suggest your blog in my dude circle, so keep on updates.
python Online training in chennai
python Online training in bangalore
python interview question and answers

manisha said...

Your good knowledge and kindness in playing with all the pieces were very useful. I don’t know what I would have done if I had not encountered such a step like this.
Best Devops online Training
Online DevOps Certification Course - Gangboard
Best Devops Training institute in Chennai

kevin antony said...

It's interesting that many of the bloggers to helped clarify a few things for me as well as giving.Most of ideas can be nice content.The people to give them a good shake to get your point and across the command.
rpa training in bangalore
best rpa training in bangalore
rpa training in pune | rpa course in bangalore
rpa training in chennai

Anbarasan14 said...

Have been a long wait for this blog. Happy on reading. Do share more of this kind.

Spoken English Classes in Chennai
Spoken English Class in Chennai
Spoken English in Chennai
Best Spoken English Classes in Chennai
Best Spoken English Institute in Chennai

sultana mohammed said...

I am really enjoying reading your well written articles.
It looks like you spend a lot of effort and time on your blog.
I have bookmarked it and I am looking forward to reading new articles.Keep up the good work..
RPA Training in Chennai
RPA Classes in Chennai
Blue Prism Training in Chennai
Ethical Hacking Training in Chennai
Cloud Computing Training in Chennai
RPA Training in T Nagar
RPA Training in Porur

sultana mohammed said...

I am really enjoying reading your well written articles.
It looks like you spend a lot of effort and time on your blog.
I have bookmarked it and I am looking forward to reading new articles.Keep up the good work..
RPA Training in Chennai
RPA Classes in Chennai
Blue Prism Training in Chennai
Ethical Hacking Training in Chennai
Cloud Computing Training in Chennai
RPA Training in T Nagar
RPA Training in Porur

nikitha josh said...

I read the post and I have really enjoyed your blogs posts. Looking for the next post.
aviation institute in Chennai
Air Hostess Training Institute in Chennai
Airline Courses in Chennai
airport ground staff training in Chennai
Aviation Academy in Chennai
air hostess training in Chennai
airport management courses in Chennai
ground staff training in Chennai

nadiya said...

Really informative blog for all people. Thanks for sharing it.
Spoken English Classes in Chennai
Spoken English in Chennai
Data Analytics Courses in Chennai
IELTS Coaching centre in Chennai
Japanese Language Classes in Chennai
TOEFL Classes in Chennai
Spoken English Classes in Tambaram
Spoken English Classes in Anna Nagar