How To Preload Images on Product Details Page in BigCommerce Store

May 2, 2013
2-3 minutes

Every usability improvement (even small) on a website eliminates one of user distraction sources. In its turn it makes users feel good on a website a bit longer. Therefore, you have more time to deliver your offers and engage them.

Website performance takes one of the most significant roles in usability. The faster content has been loaded in front of user, the less bored he or she becomes.

Product Details pages in BigCommerce is one of the most visited pages (really, check your Google Analytics data). Those who have many product images for each product have to implement images load optimization tricks without hesitation, for others it’s optional.

Every time when user moves mouse over tiny thumbnail images – small product image is being loaded. Basically, product image disappears for 0.5-1 second and then appears new one. Same happens when user moves mouse over that small image and Image Zoom appears.

All these points of user disconnection with the content might be eliminated and provide to users uninterrupted interaction with things they want to see. There are 2 ways to make images appear immediately:

  1. Add JavaScript code to preload images
  2. Change BigCommerce template file for the same purpose

1. Adding JavaScript code
This relies on jQuery framework which is used in BC by default. Just add the following JS code to your scripts file:

Or create new JS file and include it HTMLHead.html template file:

 

2. Changing BC Template file
Find ProductTinyImage.html file in /template/Snippets/ folder. It should look like following:

Now add two lines there:

So, it will look like following:

Both options works well so it up to you which one to choose. Such approach increases overall page load by ~10-500ms (depends on various obstacles), but this delay appears in scope of user readiness to wait. Actually, you won’t even recognize visually that delay. Along with that it gives crucial benefit to show images immediately when user wants to interact with them.

If you have any questions or ideas for improvement, comment below.

Enjoyed reading?
People with the same interests want to read article too.
Share this post to help them finding it
 

 
  • Tamir

    Bloody brilliant. Thanks for the tip. So simple and so effective.

  • Tim

    Worked beautifully. Thanks so much!

  • Eric

    i’ve been looking for a fix for that for years – you are legendary. thank you so much