Use Loading Animation for Images on Your Webpage

Even if optimized properly, images can weigh quite a bit. This can impact the time that visitors have to wait before they can access content on your website. Chances are, they get impatient and might drop off unless you have an intuitive way to notify users that the image will appear soon.

Consider that your test campaign consists of some images, and whenever a visitor lands on your page, the images don't show up readily and take a couple of moments. Throughout this time, the visitors see a blank area that could give the impression of a broken website.

To handle such issues, VWO has implemented an image loading animation technique. A loader animation will appear until the images present in your test campaign are not completely loaded with this implementation. As soon as the loading is complete, the loader animation will be replaced with the image.

This image loader animation avoids the flash of the original image that might appear as soon the campaign is launched and keeps the visitors informed that something is about to be loaded on a particular area of the webpage.

With the show loader animation while fetching image option present in the change image dialog of the VWO Editor, you can choose to show a loading animation for any change image operation. All you need to do is, enable this setting using the checkbox.

Benefits of Adding Image Loader Animation

• Fixes the image flicker issue
• Notify users in an intuitive way that something is about to appear on the webpage

VWO not only allows you to enable this setting at a campaign level, but you can also configure them at the workspace level such that it becomes applicable for all the campaigns that you create in the future.

Configuring Loader Animation Settings at Campaign Level

If your objective is to only add the loader animation for your current campaign, you do so by using the VWO Code Editor. 

Procedure

1. Login to your VWO account.
2. Go to Testing > A/B and create a campaign, say A/B.
3. Enter the relevant information in the fields present on the URL(S) page and click NEXT.
4. In the VWO editor, click on the image and the context menu that appears, click Change Image.
5. In the Change Image dialog, enable the SHOW A LOADING ANIMATION WHEN CHANGING THE IMAGE option.
   
   NOTE: This does not impact previous campaigns.
   
6. On enabling the above option, the Customize loader option appears. It typically enables you to configure the animation speed, primary color, and secondary color.
   
   NOTE: This adds a loaderConfig parameter (with the configurations you specified for the loader) in the JavaScript code section. You can check this in the EDIT CODE > JAVASCRIPT section of the VWO Editor.
7. If you wish to apply this setting to all the change image modifications in the campaign, you need to go to SETTINGS > Editor and enable the Show animation when the image is loading option.
   
   NOTE: By default, this setting would be applicable for future change image operations, however, if you wish to apply the changes to prior operations in the campaign as well, enable the Apply for all existing change image modification in this campaign option. All previous changes in the campaign will now have this setting.
8. Once DONE.

Configuring Loader Animation Settings at the Workspace Level

If you wish to add the loader animation for all the images present on your webpage, you can enable the code editor settings at the workspace level such that it’s applicable for all the campaigns you create in your workspace. This typically saves a lot of effort as you do not have to configure this setting for every campaign individually.

Procedure

1. Login to your VWO account.
2. Go to ACCOUNT SETTINGS > CAMPAIGN SETTINGS.
3. Scroll down to the Editor Settings and from the Editor Operations section, enable the Show animation when image is loading option.
4. Configure the desired animation loader settings (color and animation speed).
5. Once done, click SAVE.