Skip to content

Magento 2 fast product images, removes loading image for product images

License

Notifications You must be signed in to change notification settings

PinpointDesigns/magento2-fast-product-images

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

35 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Join us in our fight to kill image loaders and spinners. They do nothing to improve the user experience.

Read more about it here.

You can see it live here

magento2-fast-product-images

Magento 2 fast product images removes the loading image from product images.

The default Magento 2 behavior for product images is to load a spinner, and then load all the images in the fotorama gallery. This results in the spinner being up until the dom loads, and js can take over and replace it. It makes even the fastest Magento 2 site seem slow.

This module is quite simple in that it replaces the spinner with the first image in the gallery. So now, the page should simply show the image, and not make you feel like you are waiting for it to load. It has a few challanges in that the JS for fotorama is in the core, as well as there are many themes customizing the gallery template.

If you have changed to your Magento_Catalog/templates/product/view/gallery.phtml file then you surely will need to make some changes to this.

Installation

composer config repositories.magento2-fast-product-images git [email protected]:xumulus/magento2-fast-product-images.git
composer require xumulus/magento2-fast-product-images:dev-master -n
bin/magento module:enable Xumulus_FastGalleryLoad
bin/magento setup:upgrade
bin/magento setup:static-content:deploy

Usage

Once installed, you will then need to enable the module Stores->Config->Xumulus->Fast Gallery Load

There are no admin settings; the module can be disabled if you would like to return to the default behavior.

Theme Modifications

If you are using a packaged theme, and it includes a ../Magento_Catalog/templates/product/view/gallery.phtml, it may require modification.

Genarally the approach is to copy the JavaScript rendered html after a page load, then integrate that into the gallery.phtml file so that it will render the html as needed the first time. This allows us to not have to reengineer fotorama.js and allows things like configurable products to still change the image upon colort selection for example.

Much of these changes could be applied to your gallerty.phtm in your theme.

Future Plans

Were waiting a bit after this to determine next steps. Contact use at [email protected] with questions.

Release Notes: 7/01/2018 Intial builds, expermentation. We understand some of this module could be optimized and code moved to block code etc but have not done that in the intial release.

About

Magento 2 fast product images, removes loading image for product images

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 91.9%
  • HTML 7.8%
  • PHP 0.3%