Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
By edysmp on
Change record status:
Published (View all published change records)
Project:
Introduced in branch:
9.1.x
Introduced in version:
9.1.0
Issue links:
Description:
Attached the loading="lazy" html attribute to img tags. In the past, most lazy-loading solutions were non-native, or required custom code to work.
For example
Before:
Use a contrib module like lazy which uses a javascript library.
Or
Adding custom code like this:
function my_module_preprocess_image(&$variables) {
$variables['attributes']['loading'] = 'lazy';
}
After:
Do nothing. It’s enabled by default.
Impacts:
Site builders, administrators, editors
Comments
Any disable or configure option for exceptions?
For some reason this is causing a conflict with my theme where some images don't get loaded at all.
Is there a way to exclude some images from loading="lazy" or disabling this on my site?
Thanks
A solution for image fields
Check this: https://herchel.com/articles/pitfalls-and-fixes-when-lazy-loading-images...
Drupal 7 Theme Hook
This is how you can do it in Drupal 7 in your template.php:
See https://julian.pustkuchen.com/en/add-drupal-7-native-image-lazy-loading-...
http://www.DROWL.de || Professionelle Drupal Lösungen aus Ostwestfalen-Lippe (OWL)
http://www.webks.de || webks: websolutions kept simple - Webbasierte Lösungen die einfach überzeugen!
http://www.drupal-theming.com || Individuelle Responsive Themes
any way for disable "loading=
any way for disable "loading="lazy"
now Google pagespeed give error if the image in lazy in above-the-fold
https://www.drupal.org/project/drupal/issues/3224714
Use "eager"
If you're able to separate out the images that will show above the fold e.g. hero images, you could use a preprocess image and amend it from `loading=lazy` to `loading=eager`.
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
many thanks for response
many thanks for response @kiwimind
"you could use a preprocess image and amend it from `loading=lazy` to `loading=eager`."
How i can do this? i try find in the core where "loading=lazy" atribute is injected but i dont find with "grep -rIH 'lazy'".
i solve finally in "admin/structure/types/manage/nuestros_servicios/display" change the format to resposive image and style to "narrow"
i dont know if is a bug or what but the "loading=lazy" tag disapear of the img code
edit1 : moore info
https://www.drupal.org/project/drupal/issues/3173180
https://www.drupal.org/project/drupal/issues/3192234
setting lazy loading to eager with a preprocess function
Disabling lazy loading for all images with the image preprocess function in my theme...
How would I specify a specific image style or field machine name as you suggest?
lazy loading set to eager for image.html.twig
Another method I discovered using Classy's image.html.twig template file I am able to set the attribute for lazy loading to eager. This will impact any images that make use of the template. Note that images added within CKEditor will remain set to lazy.
deleted
deleted, code I provided doesn't work as expected. It targeted the parent div instead of the image.
Eager loading for specific image styles
Lighthouse penalizes lazy loaded images that appear above the fold with the following error:
One study found that:
To fix this in Drupal 9 or 10 for a single above-the-fold image style, you can switch from lazy to eager loading using hook_preprocess_image_style.
You can also do this with responsive image styles in the following way: