Use Loading Animation for Images on Your Webpage – Wingify

close this to read article

Attention: You are viewing documentation for Visual Editor. If you are looking for Visual Editor Next documentation, click here.

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, Wingify 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 Wingify 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

Wingify 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.

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 Wingify Code Editor.

Note: This change would only apply to the current campaign.

Procedure

Login to your Wingify account.
Go to Testing > A/B 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 Wingify 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 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 Wingify Editor.
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.
Once done, click Save.

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 each campaign.

Note: This setting only applies to future campaigns. It does not apply to the campaigns created in the past.