When a new user access your online store in his browser, most of time will be spent on loading the product images in the page and then rending them. If the network is slow, the user experience will be very bad because it’s so slower to load the product images. In this case, your user might leave your store without visiting any page on your store.
In order to enhance the user experience, we could give a width and height to the product images before the browser load and render it. When the browser start to load it, we could show an elegant spinner on the image to represent the download process. Once the image is loaded completely by your user’s browser, the spinner will fade out and the real downloaded image is shown.
If you think it is useful for your store, please apply it for your bootstrap template as follows:
Step 1. Download image_preloader.zip from dropbox.
Step 2. Unzip it and copy following folds into your TomatoCart root directory.
Step 3. Open templates > bootstrap > index.php with your favourite text editor and find following line:
— Add following code after it:
Step 4. Go to admin panel > start menu > Modules > Services to install image preloader service.
- Disable or enable it via the status field.
- Set the fake delay time.
- Set the animation duration.
After that, the elegant loading spinner will be shown on the products images in the products module, products listing and info page.
Done. If you need my assistance, please just contact me via email@example.com. I will provide free & professional technical support service for Arvixe user.
Looking for quality web hosting? Look no further than Arvixe Web Hosting!