a3rev / a3-lazy-load Goto Github PK

It appears enabling Jetpack’s Photon / WP.com Image CDN functionality also triggers devicepx JS (http://s0.wp.com/wp-content/js/devicepx-jetpack.js) to be included on the site’s pages. This then creates a problem for a3 Lazy Load per this script resulting in the srcset value for images to be populated with the placeholder/loading image used by a3 Lazy Load instead of the actual image asset(s).

The problem is then surfaced when using a high-dpi/retina screen or anything else that otherwise has the browser looking at the srcset value instead of the src for the img element (src being accounted for properly to use the actual asset, but srcset is used by the browser instead based on the srcset value[s]).

– Summary of Issue –

In short, enabling the image CDN from Jetpack has devicepx JS included which incorrectly grabs the placeholder/loading image for the srcset value on the images and then a3 Lazy Load then doesn’t account for that fact so the placeholder/loading image is simply never switched away from since that asset is still what’s present as the srcset value which the browser sees as what’s supposed to be used.

– Workaround –

My current workaround was to add this to the site’s functions.php file (I happened to place it alongside where the other scripts for the theme are being enqueued, but I imagine it could be implemented elsewhere):

// Disable Jetpack's devicepx (has a conflict with a3 Lazy Load [retains the placeholder as the higher-dpi image asset)
wp_dequeue_script( 'devicepx' );

– Possible Solution –

I’m wondering if a3 Lazy Load could have this code above be automatically toggled based on whether lazy loading of images has been enabled or not to prevent this conflict (I’m thinking it’s better to have it not break & simply miss out on devicepx behavior.) That way, a conflict with a very popular plugin can be avoided without needing people to manually troubleshoot the issue and eventually implement their own workaround. That said, I’m certain there are other options to be considered here as possible solutions to this problem.

I would imagine one should be able to use Jetpack (a very popular plugin) to take advantage of the image CDN it provides without it then breaking a3 Lazy Load’s images on devices which utilize srcset on image elements.

As an aside, this has also been posted at https://wordpress.org/support/topic/conflict-with-jetpacks-photon-wp-com-image-cdn-features-devicepx-javascript/ for cross-reference/visibility.

First of all thanks for your plugin. It does a hell of a job. Congrats!

I'm using ninja forms and it's crashing when using lazy loader together and I know how to detect if I'm in ninja forms page. Then I want to pass this information to your plugin and desactivate it in those pages.

Thanks again!

When the plugin is activated on site that has EWWW Image Optimizer configured to use JavaScript to serve WEBP images, the EWWW code stops working completely and all images are served in their original format.

I have already informed the EWWW plugin developer, so please collaborate on a solution for this.

The solution may be as simple as running the lazy loading script only after the EWWW image swapping has occurred if that plugin is active.

This is a big one, probably worth a premium.

Low resolution placeholders of the actual images, inlined as data URIs and blurred via CSS or SVG.

Demos:
https://jmperezperez.com/medium-image-progressive-loading-placeholder/
https://css-tricks.com/the-blur-up-technique-for-loading-background-images/

Some people might want no additional styling to be applied when loading. Currently a fully opaque color must be selected for the background. Meanwhile, I don't want a background color at all.

I think the best option would be to add the alpha control to the color selector.

Request for full compatibility with ACF plugin https://wordpress.org/plugins/advanced-custom-fields/ and Premium version features https://www.advancedcustomfields.com/pro/

Posted on wp forum here https://wordpress.org/support/topic/acf-support-8/ from @ondoheer

Chrome is implementing a loading attribute for images and iframes which can then be set to lazy to have it natively lazy load the element with JS then only being required for browsers without the feature (with it then having feature detection to help determine if the JS code is needed or not).

You can see more about this here: https://addyosmani.com/blog/lazy-loading/

Also, https://chromestatus.com/feature/5645767347798016 shows that Safari is interested in adopting the feature as well as providing a placeholder to show until the element’s loaded (exact comment on the matter is here: whatwg/html#2806 (comment))

Either way, I’m thinking this could be the next step in improving this functionality and being one of the first plugins to support it (while having the nice existing JS fallback) could be a nice differentiator. Also, it seems like implementing this wouldn’t be too terribly time intensive.

I also mentioned this at https://wordpress.org/support/topic/feature-request-add-native-loadinglazy-support/, but I figured I'd mention it here for more development visibility.

Thanks for the great plugin,
Kurt

Hi,

First of all your plugin is awesome! Thanks. Now I'd like to request two enhacement.

1 - Loader background transparent.
2 - Add the possibility to create and customize the lazy_placeholder.gif ALT and CAPTION tags. For SEO purposes.

If possible I will be glad to create a PR with the changes.

I created an support ticket on WordPress.org before realising the plugin is open source :)

Original message:

I am using the following code to insert an avatar on my page, however this generates an output that fails to exclude this specific avatar from being lazy loaded.

<?php echo get_avatar( get_the_author_meta( 'ID' ), 128, '', '', [ 'class' => 'no-lazy' ] ); ?>

This generates an <img> tag which uses ' instead of " (so class='no-lazy' instead of class="no-lazy"), the regex is not taking that in account thus not excluding this image from being lazy loaded.

After digging furthur I noticed more regexes dealing with HTML tags are expecting only " while a ' can also be used instead thus rendering some of the code not working for tags that use a single quote, changing all the instances for [\'"] should do the trick I think.

If time permits it I will create a PR myself, but if someone else want to take a stab at it I wouldn't object ofcourse 👍

lazy load image preview block height greater than actual image height.

CSS was given to the image

max-width: 100% !important;
height: auto !important;

Hi,

first thanks for providing this plugin - it is really useful and we use it on a high traffic site.

When trying to optimize the performance of our site even further, I discovered that A3 lazy load is making unneeded DB queries in my opinion:

within the file /admin/includes/fonts_face.php a check for Google API key is made with is_valid_google_api_key(), although I did not find any related setting within your plugin to optimize Google fonts.

We manually set return false for is_valid_google_api_key() for now to save 4 DB queries on each page request.

For me it looks like these function are not needed anymore and removing them would help improve the performance.

If I am wrong about the Google API key function, please disregard my remark and close this ticket.
best,

Robert

I have errors when checking URLs with w3c validator (and other users have, too).
Description and a possible solution for your php code is here: https://wordpress.org/support/topic/w3c-validator-error-4/

Could you please fix the issue?
I am not a programmer, so I cannot help...

Best
Tom

Hi, I'm asking if you could incorporate a filter to change the default local url to lazy_placeholder.gif.

I want to host that image externally to reduce server's http requests.

Thank you

Hello, if I try activate a3-lazy-load inside a flexslider (by example <div class="flexslider") then images not showed, they are showed always lilke spinner, until I move page (up or down) with mouse or keyboard, then images are showed inmediately.

Hello,

this script doesent Work on Firefox 64 with DIVI Theme and Builder (newest Version and WP) , only the placeholder.gif is still available.
On Google Chrome will it works... Can anybody confirm this, I do not get it!

thanks in advance
M

When a3 Lazy Load is activated users no longer see their avatar picture when hovering over the toolbar in the top right corner of the page. The menu drops down, but there is just a black space where the avatar should be. From support forum

Bug Verified - only affect user Avatar on front end - still shows on admin

http://screencast-o-matic.com/watch/cb1VjgXHt5

@alextuan

Add deferred autolaod via lazyloadxt.autoload.js.

Initital page load ist faster, then all images get downloaded in the background.

Add support to apply Lazy Load to custom widget types example - Woocommerce Widgets

Currently the a3-notlazy class instructions are on the wordpress.org plugin details page in the FQA section.

Users can't find that - should add them as a help note on the plugins Image Options panel under the Skip image by class.

hi mr, i can't change lazy-hidden height size , and it is a problem for my website . because loading section is bigger than img and after img loading ... how can solve it ?

	QLD Australia
*/
?>
<?php
define('A3_LAZY_LOAD_FILE_PATH', dirname(__FILE__));
define('A3_LAZY_LOAD_DIR_NAME', basename(A3_LAZY_LOAD_FILE_PATH));

Isn't that a bad practice? It echos a newline. I personally don't see the point of that close/open tags, you could put them on the same line like this if you really must:

?><?php

Or you could simply remove them altogether so everybody is happy? :)

Also, for every php files rather than ending it with an ?> it's better to remove it altogether to avoid the risk to print a newline or spaces.

When pages are loaded, I can see the "loading" animation turning and then images appear. This is not ideal. It would be better for any image above the fold to be visible without waiting for JavaScript to load it.

This can be done by skipping the first image in ".entry-content", ".hentry" or "article", all the images in "header", etc, but also by extending the "Skip Image Classes" feature into "Skip Image Selectors".

The input field can become a textarea, with selectors entered one per line, for easy parsing.

We have added A3 Lazy loaded plugins but in some of the post-it is taking time to load images or sometimes not loading any images after relading the pages then loading.

What is the issue here and how to fix?

I have images where the data attribute "data-skip-lazy" and the class "skip-lazy" have been added. Yet the plugin still adds the "lazy-loaded" class to each of these images. Is there a way to prevent that? I don't want the css rules applied to these images.

Hi , Product thumbnails not lazy loaded on products page on my shopify commerce. (Sorry for my english iam french)
Someone can help me for code intégration

In most cases, IMG tags have width and height attributes, which can be used to determine the aspect ratio of the respective image, and CSS that governs the rendering of the image, such as max-width, which can help determine the space required for an image before it is lazy loaded.

Pre-allocating the space will prevent redrawing of the page after every lazy loading event and can improve the user experience when scrolling is quicker than image loading, because the content won't jump around.

Of course, if there is no sufficient information, the current behaviour can be used, but when there is, pre-allocating space is much preferred to not.

From a technical point of view, there are various ways to do this, such as padding the loading GIF (inline, and removing when loading the image) or adding a before/after element (and hiding it when the image is loaded).

Another approach entirely may be to hide the original image (which should prevent the browser from loading it - no need to change "src", only "display") and underlaying it with a sized container that has the "loading" GIF in the middle of its background. Lazy loading can then be simply returning the image to its original display value (and possibly hiding the "loading" container).

@alextuan New feature for version 1.9.0 Exclude by URI and exclude Page / Post types

I have images embedded by PHP code in the theme. Is there a public function or filter I can use to make them lazy load?

Is there a developer guide for this plugin somewhere?

Hey,

As per the access logs I can see a3-lazy-load seem to making a call over http to get webfonts.json

Why is such thing needed?

Hello :)

First thanks for this plugin.

I have an issue when i use it with wp-optimize "javascript" minifying function : images are missing.

But it is strange : sometimes it happens when i'm connected to my wordpress admin and open posts from here, sometimes it works well here but not in private navigation.

This is what i have when image are missing:

With some of them (about author for instance), i analyzed the link and it is : "lazy_placeholder.gif".

If i disable a3 "lazy load activation" in its settings, or disable "javascript minifying" in wp-optimize setting : it works.
If i "clear minify cache", it works for a time, then issue happen again.

This is a link to one of my posts where i have the issue.

Thanks.

Using:

• WooCommerce 5.0+
• a3 Lazy Load: 1.9.1
• WordPress: 4.9.8
• Theme Twenty Seventeen: 1.7

Images in /shop/ or /category/category-name/ is not lazy loaded.

Note that:

• Lazy load CSS and JS files are included in the pages
• .lazy-hidden is not added to the images

@alextuan Reports of a a Fatal Error in release 1.8.0
PHP Fatal error: Using $this when not in object context in [file path]/plugins/a3-lazy-load/classes/class-a3-lazy-load.php on line 279

Happens while loading any page with lazy loaded elements.

Reported here, here and here

I installed the plugin and it was all working fine but then I looked at the code and...

I saw jQuery being loaded?

I took a look at my time on the computer and I realized I was not dreaming! It is indeed 2023, and there are still components using jQuery loading a huge library for something that can be done without it.

If the only reason to keep jQuery is to maintain old web browsers, that's ok, but it'd be nice to at least have an option to use the vanilla JS version of it, or to just use jQuery as a fallback.

Something as light as this would be nice:
https://github.com/verlok/vanilla-lazyload

It's supposed to say Jetpack pHoton, not pRoton.

You're welcome.

For some reason, the following double declarations are inserted into the page:

<script type="text/javascript">
/* <![CDATA[ */
var a3_lazyload_params = {"apply_images":"1","apply_videos":"1"};
var a3_lazyload_params = {"apply_images":"1","apply_videos":"1"};
/* ]]> */
</script><script type="text/javascript" src="//www.ronitbaras.com/wp-content/plugins/a3-lazy-load/assets/js/jquery.lazyloadxt.min.js?ver=1.8.2" defer></script><script type="text/javascript" src="//www.ronitbaras.com/wp-content/plugins/a3-lazy-load/assets/js/jquery.lazyloadxt.srcset.min.js?ver=1.8.2" defer></script><script type="text/javascript">
/* <![CDATA[ */
var a3_lazyload_extend_params = {"edgeY":"600"};
var a3_lazyload_extend_params = {"edgeY":"600"};
/* ]]> */
</script><script type="text/javascript" src="//www.ronitbaras.com/wp-content/plugins/a3-lazy-load/assets/js/jquery.lazyloadxt.extend.js?ver=1.8.2" defer></script>

Is it possible to apply this PR https://github.com/ressio/lazy-load-xt/pull/116/files ? Using this plugin with webp images won't work otherwise but both webp images and lazy loading is recommended by Google Page Speed.

I am somewhat motivated to roll sleeves up and contribute... I'm using this here plugin to lazy load, and have run into some .js widgets which I'd like to have this plugin cover.

Am looking to add this in for my requirements, and am forking. Would you be interested in a PR if / when I have this going?
http://ressio.github.io/lazy-load-xt/demo/widget.htm

This is an enhancement... not a bug or an issue.

http://ressio.github.io/lazy-load-xt/demo/bg.htm

Lazy Load XT already has a plugin for it. This feature would be amazing!