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
- 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
the VWO Editor.
- 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 changesin 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
not enable VWO’s change image loader for image changes.