Dear Brinkmann
A side effect of using SVG placeholders (which to be sure is a vast cosmetic improvement over native lazy loading) is that the browser would send an equal number of 404 requests for this SVG file at the root of our site.
Would it be possible for the plugin to instruct the browser not to do so? Or is the workaround simply to put the placeholder at the root to satisfy such requests?
]]>Hey Florian,
hope ure doing well. Wondering if this plugin is still maintained due to recent deprecation notices on PHP >= 8.1
]]>Hello All,
first: great Plugin Idea – and thanks for all the contribution.
I would like to understand how I can use lazyload for Background Images in WP Bakery. I tried it by putting in Lazyload at the End of the container under CSS, the normal images are lazyloaded but the background images not. Anyone already solved it?
This is what I can see – so no lazyload for this BG picture:
<div class="upb_row_bg vcpb-vz-jquery" data-upb_br_animation="" data-parallax_sense="30" data-bg-override="0" data-bg-animation="left-animation" data-bg-animation-type="h" data-animation-repeat="repeat" style="background-size: cover; background-repeat: no-repeat; background-color: rgb(0, 0, 0); background-image: url("https://sichersmart.de/wp-content/uploads/2023/08/OfficeTable-mid-23.webp"); background-attachment: scroll; min-width: 1202.22px; left: 0px; width: 1202.22px; background-position: 50% -63px;"><div class="upb_bg_overlay" style="background-color:rgba(0,0,0,0.5);"></div></div
Thanks a lot in advance.
Best Oliver
Hi,
I noticed such warning log from this plugin when upgrading to php 8.1: Deprecated: DOMImplementation::createDocument(): Passing null to parameter #2 ($qualifiedName) of type string is deprecated in /wp-content/plugins/lazy-loading-responsive-images/vendor/masterminds/html5/src/HTML5/Parser/DOMTreeBuilder.php on line 178 . Since the repo html5-php already address this warning 2 years ago, would you consider upgrading this plugin’s html5 library as well? Thank you ??
Hi
I love your plugin and that goes first.
However I am noticing that some images are not loading via lazy loading and are flagged by Page Speed Insight metrics.
https://i.ibb.co/S0VB0xM/pagespeed.png
https://pagespeed.web.dev/analysis/https-www-educaenvivo-com-todos-los-recursos-cuaderno-de-vocales/gm7wik0jrh?form_factor=mobile
From what I see in the results, most of them are Elementor images that are inside a listing (from the JetEngine plugin).
Could you help me? I would like to continue using your plugin
Thank you in advance,
álex
]]>Dear Brinkmann
Many thanks for this great plugin!
Performance Lab’s fetchpriority module relies on wp_lazy_loading_enabled, and so doesn’t seem to work with Lazy Loader (https://github.com/WordPress/performance/pull/528/files/a709c915969e2d3bc4c4fc27a085e25957c3d7f4). I wondered therefore if it would be possible by any chance for Lazy Loader to support adding a fetchpriority="high" attribute to img tags within the .skip-lazy class?
Actually this is not a question but an answer.
First of all I want to say thank you to the author for such an amazing plugin!
And I want to share modifications that I have done in the js_composer template in order to lazy load background images that are specified in CSS.
In general the solution is a little bit ugly, but it works.
I have removed background from the custom CSS that was generated by js_composer and added background image inside custom_css_class.lazyloaded class as was suggested a few times in previous post by plugin author.
So, here is the modified part of vc_row.php file.
You need to copy this file from:
wp-content\plugins\js_composer\include\templates\shortcodes\vc_row.php
to:
your_child_theme\vc_templates\vc_row.php
$css_classes = array(
'vc_row',
'wpb_row',
// deprecated
'vc_row-fluid',
$el_class,
vc_shortcode_custom_css_class( $css ),
);
with the following part:
$custom_css_class = vc_shortcode_custom_css_class( $css );
$css_classes = array(
'vc_row',
'wpb_row',
// deprecated
'vc_row-fluid',
$el_class,
);
2. Add the following code at the end:
$pattern = '~lazyload~' ;
$m = preg_match_all($pattern,$el_class,$matches);
if ( ! empty( $matches[0] ) ) {
$pattern = '~url\((.*)\).?\!important~i' ;
$m = preg_match_all($pattern,$css,$matches);
if ( ! empty( $matches[0] ) ) {
$custom_css_class = 'like_'.$custom_css_class;
$bg_image_src = $matches[1][0];
$url_to_remove = $matches[0][0];
$fixed_css = str_replace($url_to_remove, "none", $css);
$fixed_css = substr($fixed_css, 1);
$fixed_css = '.like_'.$fixed_css;
$lazy_load_css = $fixed_css.'.'.$custom_css_class.'.lazyloaded{background-image: url('.$bg_image_src.')!important;}' ;
$output .= '<style type="text/css" data-type="vc_shortcodes-custom-css">'.$lazy_load_css.'</style>' ;
}
}
$css_classes[] = $custom_css_class;
$css_class = preg_replace( '/\s+/', ' ', apply_filters( VC_SHORTCODE_CUSTOM_CSS_FILTER_TAG, implode( ' ', array_filter( array_unique( $css_classes ) ) ), $this->settings['base'], $atts ) );
In order activate this code all you need now is to add lazyload class in “Row Settings”->”Extra class name”.
]]>Hey Florian,
after some hours struggling with a problem not being able to translate two similar images on a setup using translatepress (free version should suffice), I realized it’s due to lazy loading logic being active on the plugins’ translation interface thus replacing image URLs with SVG markup.
That may result in images not being identified by translatepress as unique and therefore translatepress applies one media translation for other image(s). That’s at least what I was struggling with.
Maybe you can check if you can disable lazy loading here somehow.
thanks and happy holidays!
]]>Any way to lazy load a section or widget in elementor?
I have an autoplay video widget, that i would like to lazy load, in other words start playing when entering viewport, thought this plugin might help.
]]>How turn off featured image from lazy loading
]]>Will this plugin be updated for latest wordpress version?
]]>Hi, I have a problem with your plugin.
I have a post with an (Gutenberg) “Image” block, if I click on the image it should enlarge. But instead no image is displayed, an X is displayed.
If I disable your plugin the problem is solved.
Here is an example of a post with the featured image and the “image” block with the problem I described to you.:
https://www.corriereromagna.it/discoteche-dall-emilia-romagna-arriva-un-milione-a-fondo-perduto/
I await support.
Thanks
Hi, this question to your reply to previous topic i.e “Excluding the first post image”
I want also to exclude first or feature image of each of my post that appear above the fold.
I used your custom code for it on my wordpress site but its not working the first image is still lazy loaded.
Please also guide me where to add this code in function.php (at the end of function.php file or in between something?)
]]>Hi,
I installed the plugin in my website but it doesn’t work automatically. Maybe is becuase of the theme (is a custom theme from Theme Forest). Is there any way to add a tag or something in the images I want to lazy load with this plugin to make it work?
Thanks.
]]>I′m facing a problem with inlined svgs. The plugin is set to parse all the html and uses the DOMXPath to walk trougth nodes.
This makes all inlined svg lost their xmnls and in some cases add an extra / to the svg making </sgv> orphan.
For example:
<svg xmlns="https://www.w3.org/2000/svg viewBox="0 0 1400 600" data-related-device="desktopPortrait" class="n2-ow n2-ss-preserve-size n2-ss-preserve-size--slider n2-ss-slide-limiter"></svg>
get converted in
<svg viewBox="0 0 1400 600" data-related-device="desktopPortrait" class="n2-ow n2-ss-preserve-size n2-ss-preserve-size--slider n2-ss-slide-limiter"/></svg>
How can this be avoided?
]]>Hi,
I would like to lazy load elementor section background images, but it doesn’t seem to work. They are loaded with external (not inline) css for a div like this: background-image: url(“…”);
Is there any way to make this work? It would be very much appreciated.
Best regards and thanks for the great work,
Florian
]]>Hi Florian,
I see that one can set a poster image for lazy loaded videos – can you tell me how I do this? Not sure if this will show the image until someone clicks on the video, or just until it automatically loads?
Thanks,
Tim
Hi, thanks for your plugin. It is the best and the lightest!
It is possible, with a little code, to lazy load the iframes of the SoundCloud podcast site.
Thanks for support.
Hi Florian,
The main thing I want to achieve is just to lazy load embedded Youtube videos. I have activated the plugin and checked settings for frames and videos to lazy load, and also for the unveilhooks script to load (though I know it says this is not necessary). I have left every other setting at default. From what I can see in the source code, various images have been flagged to lazy load but not the videos. Any ideas?
Many thanks,
Tim
Hi Florian,
Thanks for all your hard work. I am testing this plugin on a site that uses Elementor and I specifically need the main slider background images to be lazyloaded. I added the class lazyload to the slider element, and I turned on the settings for Include lazysizes unveilhooks plugin and Enable lazy loading for inline background images. But I keep getting the ‘defer offscreen images’ warning from GTMetrix and Lighthouse. Would you be able to help me figure out how to get it to work with this site?
]]>Hi Florian,
Many thanks for the great plug-in!
I’ve just set it up and it seems to be working great, but it lazy loads my Slider image so much that it’s not being loaded, haha. How do I skip the lazy load for that specific image? I saw the exclude ‘CSS’ class, but it’s not an CSS class.
Love to hear from you how to exclude the lazy load for that image. Many thanks for your reply.
Best Regards,
Bart
Hi Florian,
Short question here: does disable-lazyload work in a picture tag?
A structure like this does not work on my side, images are still lazyloaded:
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img class="disable-lazyload" src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>Thank you,
Andrei
Hi Florian
Have you ever considered extending the plugin to include the other major functionality that the lazysizes script seems to offer, namely to automatically calculate the sizes attribute for responsive images?
Most WordPress themes and even WordPress itself do a very poor job of providing good sizes markup for images and it can make a massive performance difference to page loading times.
I see quite a few WP plugins make use of the lazy loading functionality of lazysizes but none of the sizes calculation ability. On the face of it, it looks like something like your plugin which can process complete markup could provide a good foundation for adding or replacing sizes markup.
Probably outside the scope of what you had in mind when you built the plugin, but I find it interesting that no one has tried to integrate this given the need for it and ever growing focus on performance.
]]>Hello,
Thanks for such a great plugin. It works perfect.
However, I do feel like images on a visible window during page load slightly delay to load. Is there a custom value that you can give me to speed this up?
Regards
]]>Hi,
In the link attached, I have a PDF file which I am embedding through an iframe. This is not getting being lazy loaded. The checkbox in settings for iframe is already checked.
In dev tools I see the initiator being the lazyload javascript, but ideally this should not have started loading as it is way beyond the viewport (I have set the threshold as 50)
Can you please check this?
Hello,
I have an issue with your Lazy Load plugin.
I run a plugin called Wise Chat Pro. It's a live text chat on my website. The issue I'm having is your plugin removes all icons from the profiles.
What I did is Enabled "Enable option to disable plugin per page/post" then went to the page and checked "Disable Lazy Loader".
That now shows the icons on the profiles for 5 secs and disappears. Your plugin is not completely disabled from the page. It's still affecting the icons.
I wanted to check the image sources dissipeering by inspecting element. With "Lazy Load" deactivated,
("Lazy Loader Disabled" Original "Working")
<code><img class="wcMessageAvatar" src="https://example.com/wp-content/plugins/wise-chat-pro/gfx/icons/user.png" alt="" /></code>
---
<code><img src="https://secure.gravatar.com/avatar/2aa09e04e80580f22466d92c8955db28?s=96&d=retro&r=g" class="wcUserListAvatar" /></code>
("Lazy Loader Activated" with Enable option to "disable plugin per page/post" Activated)
<code><img class="wcMessageAvatar" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2096%2096%22%3E%3C%2Fsvg%3E" alt="" /></code>
---
<code><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2096%2096%22%3E%3C%2Fsvg%3E" class="wcUserListAvatar" /></code>
I noticed when Lazy Loader is deactivated, my images show the correct image and gravatar URL but when you enable it the URL is different. It's a Data URL that seems broken. I guess that's how your plugin works but when you completely disable it from the page by "disable plugin per page/post" it should not even touch any image on that page and should show the original. So it's not completely disabled from the page.
Another issue I noticed is iframe problem with Youtube videos.
I use the Embed Video option on Youtube. Example below.
<code><iframe width="1280" height="720" src="https://www.youtube.com/embed/example" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></code>
Normally the video would be a 6:9 aspect ratio.
When I enable the option "Enable lazy loading for iframes" the video turns into a square with a 6:6 aspect ratio.
It should not convert the video to a square. It should just load the video in.
Any way to solve this? The only fix is to disable your plugin. :/
It's kinda unfortunate. This plugin is quite nice. I like the load animation on the images.Hi,
I am using a HTML code in my footer which has a png image. I observed in Chrome Dev Tools that this image is not lazy loaded.
Is this supported? If not any plans to support this?
Below is the code for reference:
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank"><input name="cmd" type="hidden" value="_donations" />
<input name="business" type="hidden" value="XXXXXXXXXX" />
<input name="item_name" type="hidden" value="Fundraising" />
<input name="item_number" type="hidden" value="" />
<input name="currency_code" type="hidden" value="USD" />
<input id="xxxxxxxxxxxxxxxx" name="amount" type="hidden" value="" />
<input name="no_note" type="hidden" value="0" /><input name="no_shipping" type="hidden" value="1" />
<input name="notify_url" type="hidden" value="https://www.myheartontravel.com/XXXXXXXXXXXXXXXXX" />
<input name="lc" type="hidden" value="EN_US" />
<input name="bn" type="hidden" value="WPPlugin_SP" />
<input name="return" type="hidden" value="" />
<input name="cancel_return" type="hidden" value="" />
<input class="wpedon_paypalbuttonimage" style="border: none;" alt="Make your payments with PayPal. It is free, secure, effective." name="submit" src="https://www.myheartontravel.com/XXXXXXXXXXXXXXX/paypal-e1600551287963.png" type="image" width="150px" /></form>Hi,
I am wondering, is there a way to set the threshold at which I want the images to start loading?
]]>Hello,
I just found that the images in wordpress-embed-block cannot load properly after upgrading wordpress to 5.7. After deactivating this plugin, the wordpress-embed-block could load images successfully.
Is there a method to handle this conflict? I still want to use this plugin to provide better browser compatibility.
Thank you.
powercliff
First, thanks for a great plugin. It has been very useful.
I’m having trouble with a few of my images coming in as duplicated. I don’t know if this is related to the topic that used Elementor, but that topic is closed and I’m not using Elementor.
Below is some example source HTML (before JS execution) from my site. The only difference between the 2 is “data:” in the first and that is missing in the second.
I disabled all of the additional settings and played around with the placeholder image checkbox, but nothing short of disabling the plugin worked.
I removed the alt and data-src contents.
Thanks for your time.
<img width="742" height="541"
src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20742%20541%22%3E%3C%2Fsvg%3E" class="attachment-grid-item size-grid-item lazyload" alt="..." data-src="..."
loading="lazy">
<img width="742" height="541"
src="image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20742%20541%22%3E%3C%2Fsvg%3E"
alt="..." data-src="..." />