Lazy Load Wordpress Post

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?

Are you sure that the plugin isn't just changing "data-src" to "src" on load or document-read, rather than waiting for the content below the fold to scroll into view? — nydame
– nydame, Commented Aug 8, 2018 at 20:08
yes. I've used this plugin to develop a non-WP website and it loads the images when they scroll into view before loading them. — zero
– zero, Commented Aug 9, 2018 at 7:36

zero · Accepted Answer · 2018-08-09 07:40:15Z

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');

answered Aug 9, 2018 at 7:40

zero

1,7553 gold badges19 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

scytale · Accepted Answer · 2018-08-08 16:23:22Z

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.

Den Mihlovski · Accepted Answer · 2020-10-02 13:41:23Z

0

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/

answered Oct 2, 2020 at 13:41

Den Mihlovski

1

Comments

Nicolas Guérinet · Accepted Answer · 2020-12-31 03:24:25Z

0

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/

answered Dec 31, 2020 at 3:24

Nicolas Guérinet

2,2361 gold badge31 silver badges41 bronze badges

Collectives™ on Stack Overflow

Lazy Load Wordpress Post

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related