Lazy loading plugin that supports images, iFrames, video and audio elements and uses the lightweight lazysizes script. With manual modification of the …
Lazy loading plugin that supports images, iFrames, video and audio elements and uses the lightweight lazysizes script. With manual modification of the markup it is also possible to lazy load background images, scripts, and styles.
Lazy loads (without the need of any manually modifications):
img
or picture
in posts, pages, Custom Post Types, Text Widgets, …* Can be enabled in the plugin options.
The plugin comes with the following options (under Settings › Media › Lazy Loader options):
skip-lazy
by default).* The unveilhooks extension of lazysizes supports more than video and audio elements, but you need to manually modify the markup to use it for:
The plugin adds a noscript
element as fallback for disabled JavaScript (can be disabled with the lazy_loader_generate_noscript
filter).
You can disable lazy loading for elements with specific CSS classes by defining them via the plugin settings (Settings › Media › Lazy Loader options). Or use the skip-lazy
class or the data-skip-lazy
attribute. skip-lazy
and data-skip-lazy
also work on wrapper elements to exclude the wrapper and its children from being processed.
Yes. See the following example that would generate lazy-load-ready output for the result of the not-supported wp_get_attachment_image()
function:
global $lazy_loader; if ( isset( $lazy_loader ) && $lazy_loader instanceof FlorianBrinkmann\LazyLoadResponsiveImages\Plugin ) { echo $lazy_loader->filter_markup( wp_get_attachment_image( 1261 ) ); }
To make it happen, you need to pass the markup that contains the image (or images) to $lazy_loader->filter_markup()
. The if
statement ensures that the Lazy Loader object is there and that it is an object of the correct class.
Important: If you modify or remove the inline styles, also the style that shows the loading spinner is affected. So if you remove the styles or modify them without adding back the spinner styles, the spinner option will not work. I created a Gist with the spinner styles – just add them to your modification to make it work.
To disable or modify the plugin’s inline styles (except the style that hides the img.lazyload
elements when JS is disabled, so only the noscript
version is displayed) you can use the lazy_load_responsive_images_inline_styles
filter. For example, to remove the inline styles, use the following code:
add_filter( 'lazy_load_responsive_images_inline_styles', function () { return ''; } );
If you want to modify it, you can do that like in the following code block (remember to include the opening and closing style
tags for additions/replacements). The code modifies the duration of the fade-in-effect:
add_filter( 'lazy_load_responsive_images_inline_styles', function ( $default_styles ) { $default_styles = sprintf( '%s <style>:root { --lazy-loader-animation-duration: 600ms; }</style>', $default_styles ); return $default_styles; } );
The CSS from the example are the default styles that are used by the plugin (without the loading spinner styles). The display: block
for .lazyload
is important for the aspectratio plugin option.
There is a textarea in the plugin settings where you can insert custom settings for the lazysizes config.
Tested with WordPress 6.5.
Added
lazy_loader_generate_noscript
filter to allow disabling of noscript
element generation.Fixed
mastermind/html5
dependency to latest version, which fixes a PHP deprecation notice.Tested with WordPress 6.1.
Fixed
Added
image
.Removed
wp_get_attachment_image
, introduced in 7.2.0. I just noticed that processing that filter by default may break cases where a wrapper element has the skip-lazy
class to disable lazy loading for contained media elements. Lazy Loader is not aware of this when processing wp_get_attachment_image
, because it cannot check the parent elements. If you want to process that filter with Lazy Loader, you can enter it in the settings field for additional filters.Fixed
Fixed
Fixed
Tested with WordPress 5.7.
Added
wp_get_attachment_image
filter that was added in WordPress 5.6.Changed
Fixed
src
and srcset
to fix a HTML validation error.Changed
Fixed
If you depend on the aspectratio script of lazysizes somehow that came with the plugin, this release has a breaking change: it removes the aspectratio option (and the script) because it uses inline SVGs as placeholders that have the same effect without needing the aspectratio script.
Added
lazy_loader_attrs_to_strip_from_fallback_elem
filter that allows to provide an array of HTML attributes that should be stripped from the fallback element in the noscript
element.Changed
width
and height
attributes are present, the plugin uses an inline SVG to prevent content reflow – thanks to WP.org user lozula.Fixed
script
tags. To fix that. inline script elements are no longer wrapped in HTML comments during markup processing to hide them from the parser. That was necessary for DOMDocument()
but is not needed when using Masterminds\HTML5()
(what Lazy Loader does).Removed
Changed
$content
param of Plugin\filter_markup()
method to prevent a fatal error that occurs sometimes when Lazy Loader is used with the Content Cards plugin.lazysizes
handle registered and deregister it before enqueuing own version. Fixes issue with Avada theme that includes own version.This release requires PHP 7
Added
skip-lazy
class and data-skip-lazy
attribute. Use them if you want Lazy Loader to ignore an element and its children. The disable-lazyload
class and data-no-lazyload
attribute will keep working for backwards compatibility. Adding the new class and attribute goes back to an initiative by Frank Goossens, developer of Autoptimize, who reached out to several devs of lazy loading plugins or plugins that also have a lazy loading feature to get a standard class and attribute across multiple plugins.Changed
Plugin\add_noscript_element()
method. It just clones the source element now, instead of creating a new empty element and adding all attributes to it.[caption]
shortcode to prevent duplicated images in Elementor.Fixed
Plugin\add_noscript_element()
method.Changed
Changed
Added
Changed
Fixed
custom-fields
before loading block editor script.Changed
the_content
and post_thumbnail_html
filters from 500
to 10001
to fix issues with the ShortPixel Image Optimizer. So if you use those filters and they need to run after the Lazy Loader, you need to increase the priority, too. This is the change that makes it a major version change. Fixed
Tested with WordPress 5.2
Added
Changed
var(--lazy-loader-animation-duration)
for duration of fade-in-effect after loading.Fixed
data-src
attribute.Fixed
Tested with WordPress 5.1.
Changed
* Renamed object in main plugin file from $plugin
to $lazy_loader
to make it accessible via the theme.
* Added an example for calling the filter_markup()
method of the plugin from the theme to modify markup of not-supported image functions like wp_get_attachment_image()
.
* Updated lazysizes to 4.1.6.
Fixed
Fixed
Added
disable-lazyload
class to disable the lazy loader for an element and its children.Changed
Fixed
save_html()
method if markup was modified.srcset
attribute with placeholder source to get valid HTML.Added
picture
element.Fixed
data-sizes
attribute, if value is auto
.src
attribute in modify_img_markup()
.Fixed
Changed
src
instead of removing it to avoid page jumps that can happen during image loading (at least in Chrome).Fixed
script
elements.Fixed
Fixed
video
and audio
elements.else
and a chunk of duplicate code (thanks mackzwellz).Changed
post_thumbnail_html
filter later (priority 500, like for the the_content
filter call, instead of 10), to fix a problem that appears when used with Responsify WP (thanks jgadbois).add_noscript_element()
method call to the beginning of the modify_*_markup
methods. With that, there is no need to remove the lazyload
class in the add_noscript_element()
method, because it was not added yet.$new_iframe->setAttribute( 'src', $src )
call from the add_noscript_element()
.$dom->saveHTMLExact()
calls from the modify_*_markup
methods.FlorianBrinkmann\LazyLoadResponsiveImages\Helpers()->save_html()
method for saving the HTML.Fixed
.lazyload
to display: block
to make the aspectratio option work correctly again.Fixed
width
and height
attr with getimagesize
because it may cause a PHP warning.Fixed
FlorianBrinkmann\LazyLoadResponsiveImages\Settings()->add_color_picker()
.(there was also a new feature added in 3.2.9, but I forgot to increase the minor version number there…)
Added
lazy_load_responsive_images_inline_styles
filter for modifying the inline CSS (for modification, you also need to add the opening and closing style
tags). If you use the spinner option and the filter, you need to add the spinner styles, because they are part of the filtered CSS (Gist with the spinner styles used by default).Changed
noscript
element to hide .lazyload
images if no JS instead of adding a js
class via JS to the html
element.DOMXpath()->query()
to fetch the element nodes.FlorianBrinkmann\LazyLoadResponsiveImages\Plugin()->filter_markup()
and no longer one time in each of the three element-specific methods.Fixed
Fixed
Added
Fixed
.lazyload
images to display: none
if JS is disabled.Added
Fixed
the_content
filter is run multiple times.Changed
Fixed
Fixed
Fixed
Fixed
Fixed
Added
Changed
src
.Fixed
Changed
Fixed
data-no-lazyload
attr to disable lazy loading for specific images (was removed in 3.1.0 without keeping backwards compatibility in mind, sorry).Changed
Fixed
noscript
element for gallery images.Removed
wp_get_attachment_image()
, because for those images cannot be added a noscript
fallback.Fixed
Fixed
Fixed
Fixed
Fixed
Fixed
Fixed
Fixed
Fixed
Changed
Fixed
Added
Changed