Image never loads, just shows loading animation

Lazy loading has become more and more popular and lazy loading options are being included in more and more plugins. Some examples we have come across are:

Draw Attention relies on the image being visible when the page loads, so lazy loading the Draw Attention image prevents our plugin from being able to run correctly and draw the hotspots as expected. Wherever possible, we’ve included code in our plugin to exclude our Draw Attention images from lazy loading. But not all the plugins give us options that we can implement as part of our plugin.

If you’re using lazy loading of images and are having problems with getting Draw Attention images to load, please try the following:

Step 1: Disable lazy loading for Draw Attention Images

Turn off just for interactive images

Check to see if your plugin offers the option to disable lazy loading for certain CSS selectors. The Draw Attention image has a skip-lazy CSS class to make it easy to add to your plugin settings if this option is available.

The selector should look like this:

Step 2: Disable lazy loading on pages using Draw Attention images

Turn off on the pages with interactive images

Other plugins offer the option to disable lazy loading on certain pages of the site. Try disabling lazy loading on the pages where you are using Draw Attention images.

Step 3: Disable lazy loading

Last resort

If the plugin that’s implementing lazy loading on your site doesn’t offer options to disable it for certain pages or images, you may have to disable lazy loading on your site. Please contact the plugin author to ask about excluding images or pages.