Lazy load with custom img tags?

  • Resolved ctrlaltdelete

    (@ctrlaltdelete)


    5 years, 6 months ago

    Hello, i’m on a twenty sixteen child theme. I have enabled “Site Accelerator” and it works just fine for all images. But lazy load doesn’t. And by that i mean no 1px placeholder as src. Images src is still the real image.

    I believe this happens because i display images like this:
    <img src="<?php echo get_the_post_thumbnail_url(); ?>" class="entry-thumb wp-post-image" alt="<?php echo $name; ?>" />

    I understand Lazy load can’t work with this manual construction of the img tag. That’s fine. But could you tell me how can i modify my img tag so it’s Lazy loaded?
    What classes or extra markup is needed? I assume i need to move the image url to data-lazy-src but what about the placeholder? Any extra classes or attributes needed?

    <img src="https://jetpack.com/placeholder.jpg" data-lazy-src="<?php echo get_the_post_thumbnail_url(); ?>" />
    Note: https://jetpack.com/placeholder.jpg doesn’t exist, what should the real placeholder be? Shall i create my own 1×1 px image and link to it?

    Please advise! Any tip is greatly appreciated.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter ctrlaltdelete

    (@ctrlaltdelete)

    I ran a test and found that it isn’t even working with standard wp functions like:

    <?php the_post_thumbnail(); ?>

    I get this html:
    <img width="640" height="905" src="https://i2.wp.com/example.com/wp-content/uploads/2019/09/test.jpg?fit=640%2C905&ssl=1" class="attachment-post-thumbnail size-post-thumbnail wp-post-image jetpack-lazy-image jetpack-lazy-image--handled" alt="" data-lazy-loaded="1" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 60vw, (max-width: 1362px) 62vw, 840px">

    So, i’m confused now. How to trigger lazy load at all?

    Plugin Support KokkieH

    (@kokkieh)

    Hi there,

    I understand Lazy load can’t work with this manual construction of the img tag. That’s fine. But could you tell me how can i modify my img tag so it’s Lazy loaded?
    What classes or extra markup is needed? I assume i need to move the image url to data-lazy-src but what about the placeholder? Any extra classes or attributes needed?

    We’re not able to help with PHP customizations like this. You can find the filters available to modify how Lazy Images work at https://jetpack.com/support/lazy-images/#customizing-lazy-images, but we can’t help you with the actual code you’ll need to add the necessary support to your existing customization.

    The folks over at https://wordpress.stackexchange.com/ might be able to help with something like that.

    I ran a test and found that it isn’t even working with standard wp functions

    So, i’m confused now. How to trigger lazy load at all?

    It should work in this case – your HTML contains all the classes it should, though not the data-lazy-src attribute.

    Are you willing to share a link to your site with that configuration so we can take a look? Are you using any other plugins or custom code on the site that might be interfering here?

    Try disabling all plugins except Jetpack, all code snippets, and switch to a default theme like Twenty Nineteen and check if the images still won’t lazy-load. If that works, re-enable your plugins and custom code snippets one at a time until lazy-loading breaks to determine what’s causing the issue.

    Thread Starter ctrlaltdelete

    (@ctrlaltdelete)

    @kokkieh I tested same image next to each other. Once called with the_post_thumbnail() and then with get_the_post_thumbnail_url().

    the_post_thumbnail() Renders about a second later. While:
    get_the_post_thumbnail_url() Shows up immediately.

    So this IS working it just doesn’t look like in the example. Could it be possible that this page is outdated? -> https://jetpack.com/support/lazy-images/

    Specifically this example: <img src="https://jetpack.com/placeholder.jpg" data-lazy-src="https://jetpack.com/image.jpg" />

    Because that’s what threw me off. I was expecting something like that in the HTML, but it you don’t see that in reality. It works differently.

    • This reply was modified 5 years, 6 months ago by ctrlaltdelete.
    Thread Starter ctrlaltdelete

    (@ctrlaltdelete)

    It works, i figure it out. You don’t see the real code on browser “inspect” you have to view the source code to see data-lazy-src and srcset 1px placeholder.

    Plugin Support KokkieH

    (@kokkieh)

    Thanks for letting me know ??

    I wanted to do exactly the same thing, due to using a plugin which for some reason reinvents the wheel and has its own media library.

    I found that adding the following attributes to an img tag causes Jetpack lazy load to take effect:

    class="jetpack-lazy-image"
data-lazy-src="{YOUR IMAGE SRC}?is-pending-load=1"
srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"

    There are some downsides to this:

    1. Doesn’t add the noscript tag
    2. Risk of breaking if Jetpack changes their implementation
    3. Doesn’t work if you have images in HTML added to the page dynamically e.g. using an AJAX “load more” type of functionality

    The last point was a problem for me. Jetpack lazy load used in the normal way doesn’t kick in for HTML loaded with AJAX, but I couldn’t see how it does that by inspecting the Jetpack code.

    So I came up with an alternative of using the standard WordPress get_image_tag function to get the HTML for a placeholder image of the same size as the actual image, then replacing the src of the resulting HTML. All the images I wanted to use this method for are the same size so it works nicely.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Lazy load with custom img tags?’ is closed to new replies.