Lazy Load Wordpress Post - wordpress

Question

So I'm trying to figure out a way to automatically lazy load all images in a blogpost on a Wordpress site for a client.
As a developer, I'd rather not use a WP plugin (like BJ Lazy Load or A3 Lazy Load), preferring instead to use a JS plugin (JQuery Lazy by eisbhr) to give me more control.
So far, all the SO solutions I've found haven't worked.
Attempt #1
I used the the_content hook to change the src to data-src. The code I used is basic.
function add_data_src_to_content($content) {
return str_replace("src=", "data-src=", $content);
};
add_filter('the_content', 'add_data_src_to_content');
While it did change the src to data-src, the browser still loads the images below the fold (which defeats the purpose of lazy loading). I surmised that the_content hook actually also uses another hook to load images in. Which is how I got to my second attempt.
Attempt #2
For my second attempt, I tried using the image_send_to_editor hook. The code:
function add_data_src($html, $id, $caption, $title, $align, $url) {
return str_replace("<img src", '<img data-src', $html);
};
add_filter('image_send_to_editor', 'add_data_src', 10, 9);
This wouldn't work on posts that are already published. So I had to re-insert the images for this code snippet to work. I was also successful at converting src to data-src! The problem: yet again, WP still loads the image (when checking the Network tab in Dev Tools), defeating the purpose of lazy loading.
At this point, I'm stumped. How do I prevent WP from loading images below the fold without using a plugin?

Answer 1

I've figured out what was wrong: apparently, Wordpress automatically adds an srcset and sizes attribute to all images inserted (apparently, this has been in place since WP 4.4). I figured this out when I tried playing with the image_send_to_editor hook. The JS plugin I'm using requires me to make the srcset into data-srcset and sizes into data-sizes for the lazy load to work. Applying those to the changes on the the_content hook actually worked. Final code (which worked) is:
function add_data_src_to_content($content) {
$content = str_replace("<img src=", "<img data-src=", $content);
$content = str_replace("srcset=", "data-srcset=", $content);
$content = str_replace("sizes=", "data-sizes=", $content);
return $content;
};
add_filter('the_content', 'add_data_src_to_content');

Answer 2

I assume you are referring to images within content entered via post/page editors and not images in say sidebar widgets or the home page (these will obviously still load).
I added your Attempt#1 to my custom site plugin, and images added via post editor were load hobbled and did not display. However; images inserted by other means e.g. shortcodes continued to be loaded and displayed unless I gave your filter function "low priority".
Try making your Attempt #1 filter function run after "everything else". add_filter('the_content', 'add_data_src_to_content', 9999);
Remove your lazy load Javascript and then clear cache and browse one of your pages and view (HTML) source. If your filter is working or partially working you will see "data-src=" attributes in your HTML instead of "src="; if so then the problem may relate to your Javascript set-up and "early" non lazy loading.

Answer 3

It will add 'loading=”lazy”' attribute to all 'img loading="lazy"' and 'iframe loading="lazy" iframe' tags automatically when a new post or page is created.
It is implemented in the following way:
add_filter( 'save_post', 'add_lazy_load', 10, 3 );
function add_lazy_load($post_id, $post, $update)
{
if (wp_is_post_revision($post_id))
{
return;
}
if ( ! class_exists( 'DOMDocument', false ) )
return;
remove_action('save_post', 'add_lazy_load');
$post_status = get_post_status();
Read more: https://www.plerdy.com/blog/lazy-loading-setup-wordpress/

Answer 4

I think that the most viable solution for lazy loading is native lazy loading. In this case, you just have to add a loading attribute to your img tags. Then, the browser will be in charge of lazy loading.
Here are the supported values for the loading attribute:
auto: Default lazy-loading behavior of the browser, which is the same as not including the attribute
lazy: Defer loading of the resource until it reaches a calculated distance from the viewport.
eager: Load the resource immediately, regardless of where it's located on the page.
It is supported by Chrome, Edge, Opera and Firefox.
https://web.dev/browser-level-image-lazy-loading/