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 dropoff 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. With this implementation, a loader animation will appear until the images present in your test campaign are not completely loaded and as soon the loading is complete, the loader animation will be replaced with the image.
This image loader animation not only avoids the flash of the original image that might appear as soon the campaign is launched but also 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 account level such that it becomes applicable for all the campaigns that you create in the future.
NOTE: These settings would apply to the changes you make after the settings
have been applied. Any operation that takes place before the settings are
applied is not impacted.
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.
NOTE: This change would only be applicable to the current campaign.
- Login to your VWO account.
- Go to TESTING and create a campaign, say A/B.
- Enter the relevant information in the fields present on the URL(S) page and click NEXT.
- In the VWO editor, click on the image and the context menu that appears, click Change Image.
- In the Change Image dialog, enable the SHOW A LOADING ANIMATION WHEN CHANGING THE IMAGE option.
NOTE: This does not impact previous campaigns.
- On enabling the above option, the Customize loader option appears. It typically enables you to configure the animation speed, primary color, and the secondary color.
NOTE: This adds a loaderConfig parameter (with the configurations you
- If you wish to apply this setting to all the change image modifications in the campaign, all you need to do is, go to SETTINGS > Editor, and enable the Show animation when 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.
- Once DONE.
Configuring Loader Animation Settings at Account 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 account level such that it’s applicable for all the campaigns that you create in your account. This typically saves a lot of effort as you do not have to configure this setting for every campaign individually.
NOTE: This setting only applies to future campaigns. It does not apply to
the campaigns created in the past.
- Login to your VWO account.
- Go to ACCOUNT SETTINGS > CAMPAIGN SETTINGS.
- Scroll down to the Editor Settings and from the Editor Operations section, enable the Show animation when image is loading option.
- Configure the desired animation loader settings (color and animation speed).
- Once done, click SAVE.
NOTE: If you already have a loading state for images on your website, say
loader for image changes.