Introduction

As lazy loading becomes increasingly popular, lazy loading options are being included in more and more plugins. Some examples we have come across are:

• Jetpack
• Smush Image Optimization
• SG Optimizer

Draw Attention relies on the image retaining a visible state when the page loads. Lazy loading the Draw Attention image prevents our plugin from being able to function 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. Although, not all of the plugins give us options we can implement as part of our plugin.

If you’re using lazy loading for images, and are running into issues where the Draw Attention image never loads, please try the following:

1. Disable lazy loading for Draw Attention images
2. Turn off lazy loading on pages using Draw Attention images
3. Completely disable lazy loading

Have you embedded your Draw Attention image? If not, please take a look at how to display the interactive images you create.

Disable Lazy-Loading

Step 1: Disable lazy loading for Draw Attention images

Turn lazy loading 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:
.skip-lazy

Step 2: Turn off lazy loading on pages using Draw Attention images

Next, try turning lazy loading 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: Completely disable lazy loading

As a last resort, we recommend completely disabling lazy loading on your site. This rings especially true when the plugin is implementing lazy loading on your site and doesn’t offer options to disable it for certain pages or images.

We also recommend contacting the plugin author to ask about excluding images or pages.

Check if JavaScript file is missing or blocked

Sometimes plugins will prevent from our JavaScript files from being loaded. Such plugins are generally cookie or content blocker plugins.

Real Cookie Banner Plugin

One such example is the Real Cookie Banner plugin, which has a template for content blockers. The “Open World Street Map” content blocker in particular may prevent the leaflet.js file from loading.

Head on over to your WP-Admin Area > Cookies > Content Blocker, and click the OpenStreetMap content blocker.

Within this area, you’ll need to locate the URLs/Elements to block field. If you see leaflet.js within this list, please delete this line.

Then click Save, and finally head back to the page that the interactive image is embedded on and refresh it.

Related Guides

• 

  JavaScript Error Displays or Flashes

• 

  Unable to Edit or Create

• 

  Hotspots Out of Place

• 

  Hidden Images Don’t Work