wp-media / rocket-lazy-load Goto Github PK

I manage more than 30 sites and use wp-cli to automate tasks. When installing the plugin via wp-cli, I need to log in to admin to activate the options.

An integration with wp-cli that makes it possible to set the options would be very welcome :-)

'src="data:image/gif;base64,R0lGODdhAQABAPAAAP///wAAACwAAAAAAQABAEACAkQBADs=" sets a white 1x1 GIF as placeholder. This looks really ugly if the background is anything other than white. A transparent GIF would be much better: https://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/

That is, data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

Hope you can change this to transparent and also update the docs at https://docs.wp-rocket.me/article/130-manually-apply-lazyload-to-an-image

As we do for Divi and Beaver Builder, if we detect the page is currently the editor for Oxygen Builder, we can prevent lazyload.

Oxygen Builder used ct_builder as a parameter in the URL.

The plugin is not working for me, all data is being processed right away. Using WP 5.3 and the newest plugin version.

Embed data is coming from an oEmbed ACF field if that helps.

Link: https://dennis.spacepress.dev/

There's a clear few second delay for QM finishing loading just by having Rocket Lazy Load active.

If you enable a large data set panel like SAVEQUERIES true, delay will be tens of seconds, if not for all intents and purposes "infinite" (depending on how high the query count is).

Hypothesis: something within post-page-load JS routines probably collide.

Symptom: visible parts of the page finish loading, then it comes time for QM to render its admin panel, but this part never finishes, and browser tab starts spinning CPU at 100%.

Cross-repo issue at johnbillion/query-monitor#350

Can you guys help figure this out? We could really use having both plugins active.

When the images option is enabled, the first image in the viewport doesn't load until one scrolls down the page.

See issue here (Renee & Alice): https://trello.com/c/Ia2E1Y1B/2-ll-basic-testing

example ticket: https://secure.helpscout.net/conversation/600501326/71417?folderId=273761

e.g.
https://secure.helpscout.net/conversation/489600269/55831?folderId=1213662
https://secure.helpscout.net/conversation/487071873/55463?folderId=377611

Website: https://www.plantphenomics.org.au/

This is the image carousel, LazyLoad off:
http://jmp.sh/RhlessO

This is when LazyLoad for images is on:
http://jmp.sh/wIDojAR

Ticket: https://secure.helpscout.net/conversation/490256421/55954?folderId=628132

I tested it in our megasite, and looks like is working there:
http://mega.wp-rocket.me/avada/about-me/
Slider: http://jmp.sh/TOCKOKX

When LazyLoad is active in IE it generates an additional request which is seen as "pending" in the browser, and can be reported as a 404 by logging tools. This request isn't present in Chrome and FF.
LazyLoad itself seems to still work.

IE 11:

https://www.webpagetest.org/result/171228_8A_35db68854400ac37eb4ade413f8a3666/1/details/#step1_request11

IE 16 / Edge:

example ticket:
https://secure.helpscout.net/conversation/491305864/56100/?folderId=273764

When the images option is enabled

-- Vertical images in the grid experience some display issues.

-- The spacing between grid items is inconsistent.

See issues here: https://trello.com/c/sFVV148a/12-ll-masonry-compatibility-beaver-builder-posts-grid-module

When a post is embedded by oEmbed (a URL mentioned in another post), no thumbnails are shown.

It can be solved by this code in functions.php.
add_filter( 'do_rocket_lazyload', function ($r) { return $r && !is_embed(); } );

Is there a way to access the JS lazy loader in order to manually trigger the loading of images that were fetched asynchronously?

This seems necessary when lazy loading posts on a page for example.

Hi,

at the moment it seems like all images and iFrames are processed by the js script even though there is the possibility to exclude images from being prepared by the php side of things

this results in excluded image still getting the lazyloading class and data-was-processed attribute whereas they have been excluded from the processing.

Is it a known issue or by design?

I have started to add a filter on the elements_selector option of the hard coded lazyLoadOptions in /rocket-lazy-load.php like it's been done for $threshold

this seems to be working as intended with adding a filter like

add_filter(
  'rocket_lazyload_elements_selector',
  function () { return "img:not([data-no-lazy]"; }
);

for instance

any input on this would be great

thanks

Hi,

Since version 1.4.8, the new lazy loading method without a placeholder shows a brief broken image icon and the alt text.

See screenshot here: https://imgur.com/a/6QjWJZ1

I'm not sure if this was intended or not, but it's not too pretty.

Hi,

The new SVG placeholder is not working properly and the SVG is not being loaded. It shows a broken image icon before the image is lazy loaded and throws the following error in the W3C html validator (https://validator.w3.org/):

Bad value data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1 1\'%3E%3C/svg%3E for attribute src on element img: Illegal character in scheme data: space is not allowed.

To fix it, I added this code in my theme's functions.php file:

function change_rocket_lazyload_placeholder() {
	return "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E";
}
add_filter('rocket_lazyload_placeholder', 'change_rocket_lazyload_placeholder');

This loads the SVG properly without the broken image icon and passes the W3C html validation test.

Hi. We probably need to avoid rendering our lazy load markup optimizations during AMP output and let AMP plugin take care of it instead.

https://github.com/Automattic/amp-wp/ for details.

The first few slides load correctly, but after the 2nd or 3rd, they become blank.
This did not happen with the previous version of lazyload.
https://secure.helpscout.net/conversation/490146023/55938?folderId=377611

Example - https://www.energyarts.com/
There's a video slider on the homepage. Press play on the 1st video, then press Pause.
Navigate to another video in the slider. Press play, and you'll hear the first one start playing again.

This site uses Divi's Slider module. Issue can be replicated on our divi test site.
Ticket: https://secure.helpscout.net/conversation/772569561/95727?folderId=377611

Also reported on a site using Flatsome with a gallery of product videos:
https://secure.helpscout.net/conversation/718221908/88246/?folderId=273764

Per request: https://secure.helpscout.net/conversation/533068861/61387?folderId=1391599

Make the line "The tiny Lazy Load script for WordPress without jQuery or other libraries." translatable.

We don't minify the inline lazy-load-related scripts on the free lazy-load plugin.

Doing the minification will save 1.5kb.

It's not much, but it will make some users happy :)

Compared to WP Rocket, we have the minify_script() method using the JS() class.

Maybe we can port these and use them on the lazy load plugin?

My website already uses JQuery in the header for another plugin. So, is it possible to make this plugin work with Jquery and so there will be no need for one more JS request?

Traceback and details available at https://sentry.io/share/issue/e80602bf8b88462dba0ebba60ee4dab0/

Example crash URL https://conversionxl.com/wp-json/wp/v2/posts/40765

Copy-paste for GH issue search keywords

[09-Jan-2019 16:46:18 UTC] PHP Fatal error:  Uncaught Error: Call to a member function get() on null in /home/convers/public_html/wp-includes/query.php:28                                                                                   
Stack trace:
#0 /home/convers/public_html/wp-content/plugins/amp/includes/amp-helper-functions.php(264): get_query_var('amp', false)
#1 /home/convers/public_html/wp-content/plugins/rocket-lazy-load/src/Subscriber/ThirdParty/AMPSubscriber.php(41): is_amp_endpoint()                                                                                                          
#2 /home/convers/public_html/wp-content/plugins/rocket-lazy-load/src/Subscriber/ThirdParty/AMPSubscriber.php(23): RocketLazyLoadPlugin\Subscriber\ThirdParty\AMPSubscriber->isAmpEndpoint()                                                  
#3 /home/convers/public_html/wp-content/plugins/rocket-lazy-load/src/EventManagement/EventManager.php(43): RocketLazyLoadPlugin\Subscriber\ThirdParty\AMPSubscriber->getSubscribedEvents()                                                   
#4 /home/convers/public_html/wp-content/plugins/rocket-lazy-load/src/Plugin.php(86): RocketLazyLoadPlugin\EventManagement\EventManager->addSubscriber(Object(RocketLazyLoadPlugin\Subscriber\ThirdParty\AMPSubscriber))                      
#5 /home/convers/public_html/wp-includes/class-wp-hook.php in /home/convers/public_html/wp-includes/query.php on line 28                                                                                                                     
[09-Jan-2019 16:46:18 UTC] PHP Notice:  is_feed was called <strong>incorrectly</strong>. Conditional query tags do not work before the query is run. Before then, they always return false. Please see <a href="https://codex.wordpress.org/De
bugging_in_WordPress">Debugging in WordPress</a> for more information. (This message was added in version 3.1.0.) in /home/convers/public_html/wp-includes/functions.php on line 4196                                                        
[09-Jan-2019 16:46:18 UTC] PHP Notice:  is_amp_endpoint was called <strong>incorrectly</strong>. is_amp_endpoint() was called before the &#039;parse_query&#039; hook was called. This function will always return &#039;false&#039; before th
e &#039;parse_query&#039; hook is called. Please see <a href="https://codex.wordpress.org/Debugging_in_WordPress">Debugging in WordPress</a> for more information. (This message was added in version 0.4.2.) in /home/convers/public_html/wp-
includes/functions.php on line 4196

After updating the plugin to 2.2.3, the entire website is inside a container.
In the Chrome development console, it shows a JavaScript error
At the bottom there is a text "The site is experiencing technical difficulties".

Need help please.

Undefined variable: lazy_sources in Image.php on line 273

We need to either move $lazy_sources = 0; outside of if ( preg_match_all()){} or move if ( 0 === $lazy_sources ){} inside of if ( preg_match_all()){} (like we do on WP Rocket).

When iframes & videos option is enabled and videos are uploaded through the fusion builder (shortcode), the videos are not responsive or the visual display can break.

See issue here: https://trello.com/c/smdHewy6/5-ll-bug-fix-iframes-option-no-longer-breaks-responsive-videos

YouTube thumbnail replacement with Vimeo video causes alignment issue:

https://s.nimbus.everhelper.me/share/1238733/17mu8frdtifg5h0f9kg6

It would be great if the options were global when the plugin is network activated. I want to use the same settings on all sites, and setting them up one-by-one is tedious.

Plugin doesn't work locally when using WAMP. Does this plugin require a specific version of PHP?

"Replace Youtube videos by thumbnail" requires the iframe option to be enabled, but currently it's possible for the user to check the thumbnail box without also checking the iframe box.
Maybe indent thumbnail option under iframe, and grey it out until iframe is checked?

Output source code:

Browser output for users:

This behaviour creates unnecessary paragraphs and if the paragraphs are formatted in CSS with padding/margin, for example, this creates unsightly empty blocks for the user in the browser.

Example: https://iphone-tricks.com/tutorial/4028-whatsapp-how-to-use-bold-italic-and-strikethrough-text

Ticket on WP Rocket inbox: https://secure.helpscout.net/conversation/1451726245/247022?folderId=2952229

When Jetpack's Photon is turned on with Rocket LL all images are larger and misplaced.

With Photon On:

Photon Turned off

Page in reference: http://13-bit.com/wpr-lazy-load-test/

Hi there,

Thanks for the plugin! much appreciated :)

so I was testing the plugin and noticed that images that were added using wp_get_attachment_image would not be lazy loaded

seems like this is because the filtering of the img tags to add the data-* attributes is not possible for wp_get_attachment_image because of the way rocket-lazy-load operates, using preg_replace_callback to alter img tags (as there is no filter available on the html outputs of the method)

a discussion on the lack of filter for the html output of wp_get_attachment_image is here: https://core.trac.wordpress.org/ticket/27399 (you're probably aware of it)

the filter might be added to core in the future but another recommandation would be to use wp_get_attachment_image_attributes filter for this case

I'm reaching out because I'd like to know if you agree with what I describe and if a workaround or solution is available - or in the works - or if you'd be ready to accept a PR if I had time to work on something to solve the issue on my end.

I could use the plugin method directly on the code that outputs the image like:

<?php echo rocket_lazyload_images(wp_get_attachment_image( $image['id'], 'thumbnail', false)); ?>

but this is not very convenient and future proof

thanks in advance for any input ton this

When LazyLoad is active the grid is blank, except for a grey placeholder on mouseover.
For screenshots etc see: https://trello.com/c/ut3bS60Q/14-ll-masonry-compatibility-essential-grid

Hi,

So I opened two (2) tickets (#60 and #59) regarding issues with with this plugin, but they're still not fixed after a few months.

Anyways, I figured out what broke the plugin, and it's the new rocket_lazyload_get_attachment_image function that was added in 1.4.8. Removing this function fixes the problems for ticket #59.

I didn't dig any further to find out why this specific function breaks the plugin, but for anyone having the issue mentioned in ticket #59 and who's interested in getting this plugin working properly again, then you just have to add this line to your functions.php file:

remove_filter( 'wp_get_attachment_image_attributes', 'rocket_lazyload_get_attachment_image', 11 );

Hopefully this problem will be resolved in the next version.

For example, in this case the original video is 640 x360:

But when the replace with thumbnail option is active, both the thumbnail and embedded video are much larger:
http://recordit.co/pql319XYzT

https://secure.helpscout.net/conversation/489835260/55873?folderId=273761

Hi,

I noticed setting data-no-lazy to 1 on images does not work anymore in version 1.4.8. The plugin still lazy loads the images that have the flag set while it should skip them.

Thanks.

The dependency of this plugin works with background images as well.
I tried data-lazy-src and data-bg-src but none of them worked.

problem:
horizontal scroll caused by certain lazy loaded images (identified these images by removing all images one by one in DOM)

workaround:
add data-no-lazy="1" to problematic images, but our editors should not have to investigate this by themselves, and insert this attribute by hand for images that break the page.

PS: when scrolling to the problematic image(s), data-was-processed="true" gets added to img element and horizontal scroll for the page disappears.

how to proceed?

It's been reported in multiple themes, but in this case I'm specifically testing Divi's video module.

With iframes activated it looks like this:

Instead of:

It appears that with the builder, the placeholder image does not transition to the lazyloaded image.

So i updated and after activation, every page on the web shows only this error.

Catchable fatal error: Argument 3 passed to RocketLazyLoadPlugin\Subscriber\LazyloadSubscriber::__construct() must be an instance of RocketLazyload\Image, string given in /var/www/clients/client17/web218/web/wp-content/plugins/rocket-lazy-load/src/Subscriber/LazyloadSubscriber.php on line 71

When embedding a video from Vimeo using [embed] shortcode, the following happens:

<iframe> has no src attribute.

Vimeo's Javascript can't read the src attribute.

This specific video is hidden during the page load which might be causing the issue.

Managed to fix this with a workaround by using <iframe> with data-no-lazy="1" instead of [embed].

Original code: [embed width=1000 height=562]https://player.vimeo.com/video/xxxxxxxxx[/embed]

cc @lkraav

There are many scenarios where a user might be using an '<li>' for a list and attaching a background image to the list. There should be a way to automatically handle the lazy loading much like how you can with <div> elements.

Hi,

For plugin version 1.4.9, the there was no placeholder image and the src attribute was empty, as recommended by verlok (https://github.com/verlok/lazyload#do-not-use-placeholder-images) for better perceived performance.

I noticed that in version 2.0, there is now an svg placeholder image. I know this is easily changable by using the rocket_lazyload_placeholder filter, but before changing anything, I was curious to know why it was decided to switch back to a placeholder image instead of an empty one?

Thank you.

I've wrote the issue here:
https://wordpress.org/support/topic/outstretched-natural-sizes-of-images-for-unknown-reason/

As well found one bug:
https://wordpress.org/support/topic/bug-with-brackets/

Sorry, It was my fault by testing in a old browser version.

A customer has reported a fatal error when upgrading to WooCommerce 4.4 version.

As Daniel points out here, we include the composer packages with the plugin and load the composer autoload file. That puts the original package PSR4 namespaces into memory.

Though our plugin doesn’t use them, as we have the dependencies in src/Dependencies with different namespaces, the original Container package can be called through this plugin when:

1. This plugin loads first (which it does).
2. And then WooCommerce plugin loads.

Fatal error.

The actual svg placeholder used it's causing problems, since the viewbox it's a square and makes the browser reserve a square for space and for images that have random sizes this doesn't play well. For example i have problem with parallax at the top of a page since they fire before the lazyload gets the image and they calculate their passion using the square placeholder.
From what i've seen in the code this could a be an easy fix and just pass to the placeholder the width and the height of the image and this way the browser will reserve the correct space for the image that will be loaded and the page won't jump around when the image with it's true height will be loaded and it's not a square

Using this plugin in IE 10 gave som errors due to the use of dataset, for example Unable to get property 'wasProcessed' of undefined or null reference lazyload-8.0.3.js.

According to https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset dataset is available in IE 11 and above.

By using this dataset shim I was able to make the lazy loading work:
https://gist.github.com/brettz9/4093766

I think a mention about this in the readme would be nice, and maybe also a mention about the shim to help people debug any IE issues.

(I read on http://docs.wp-rocket.me/article/278-common-issues-with-lazyload
that the plugin should work on IE 9 and above, but maybe that doc is for the bigger wp rocket plugin.)

Hello!

ROCKET_LL_ASSETS_URL etc. URL-s are defined very early: thus CDN MU/plugins are not able to alter the URL of e.g. lazyload.min.js

Please use core functions (plugins_url, content_url) at the time of outputting the script tag.
Thank you.