This guide applies to:
In this guide
As lazy loading becomes increasingly popular, lazy loading options are being included in more and more plugins. Some examples we have come across are:
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:
- Disable lazy loading for Draw Attention images
- Turn off lazy loading on pages using Draw Attention images
- 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.
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:
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.
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.
File a support ticket with our five-star support team to get more help.
File a ticket
Unable to Edit or Create
Hidden Images Don’t Work
Plugin and Theme Conflicts