»Lazy Loading Responsive Images« becomes »Lazy Loader« and has new functions

Posted on

I maintain a lazy loading plugin, that got a bigger update a few days ago. Among other things, it was renamed to Lazy Loader, because it not only supports »only« images with the new version.

The plugin uses the small lazysizes script by Alexander Farkas. In a support thread, a user raised the question if it would be possible to include the unveilhooks extension of the script in the WordPress plugin, which allows things like lazy loading of background images. After that, I started with a bigger update, that contains the following changes:

Supporting more elements

Since version 3.2.0, the plugin supports – besides images – the auto-modification of the markup for lazy loading of the following elements in post content and widgets (you need to enable support for those elements via the plugin options under Settings › Media › Lazy Loader options):

  • iFrames.
  • Audio elements (needs the unveilhooks extension of lazysizes and loads it automatically, if the option is enabled).
  • Video elements (also needs the unveilhooks script and loads it).

One other new option allows you to load the unveilhooks plugin regardless of the state of the audio and video options. With manual adjustment of the markup and loading the unveilhooks extension, you can also use lazy loading for the following elements:

  • Background images.
  • Styles.
  • Scripts.

Besides the post content, the plugin now also supports widgets and Gravatars.

Moving the options to the media settings screen

The plugin options (until now that was only one option) lived in the customizer. After thinking about that, the customizer does not seem to be the right place for that kind of options, so I moved them to the media settings screen.

If you need a lazy loading plugin, give it a try 🙂

2 reactions on »»Lazy Loading Responsive Images« becomes »Lazy Loader« and has new functions«

  1. Hello,

    Thanks for the plugin. Where can we find the instructions for manual modification of the markup.

    I have images in my theme loaded with custom functions (a lot of them printed from the media url and srcset). I also have images printed from a background property in the css file.

    Thanks for your help,

    Reply

    1. Hi,

      here is an example (the markup of your comment avatar):

      <noscript>
	<img alt="" src="https://florianbrinkmann.com/en/wp-content/plugins/avatar-privacy/public/images/mystery.svg" srcset="https://florianbrinkmann.com/en/wp-content/plugins/avatar-privacy/public/images/mystery.svg 2x" class="avatar avatar-60 photo avatar-default" width="60" height="60">
</noscript>
<img alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="avatar avatar-60 photo avatar-default lazyload" data-srcset="https://florianbrinkmann.com/en/wp-content/plugins/avatar-privacy/public/images/mystery.svg 2x" data-src="https://florianbrinkmann.com/en/wp-content/plugins/avatar-privacy/public/images/mystery.svg" width="60" height="60">
      1. You insert the normal image markup into a noscript
      2. Then create a img element with an empty (or the data image like in the above code) src attribute.
      3. Create a data-src attribute with the image URL.
      4. Add the lazyload class.
      5. Optional: Add data-sizes and data-srcset attributes.

      More info on the markup and options can be found in the docs of the lazy loading script.

      Hope that helps!
      Florian

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *