Lazy Load Breaks Some Images

  • Resolved emboldtyler

    (@emboldtyler)


    1 year, 6 months ago

    We are having trouble with a lot of our sites all of a sudden with the Lazy Load Images setting enabled, looks like it started with plugin version 5.5. Some of the images won’t display. It looks like their src or srcset attributes are getting prepended with data- but that isn’t getting removed again when they are scrolled into view. They also aren’t getting the data-lazyloaded="1", data-ll-status="loaded", or class="entered litespeed-loaded" attributes/classes. In my testing, on the 5.4 version, lazy loading was just skipping these images altogether so they worked just without lazy load.

    I created this example site by cloning one of our sites where an image down the homepage is not getting replaced. The filename for that one is Moore-Research_059-scaled-e1673302915758.jpg.webp a second example is on the /about page, where Moore-Research_033.jpg is exhibiting the same behavior. I also tried cloning this site to a private apache server in case OpenLitespeed was the issue, but the same thing happens on the Apache server too, so I think this must be a plugin issue.

    Trying to avoid excluding specific images, because on some sites where this happens, there are too many pages to make that feasible, but that does seem to work if that helps with troubleshooting.

    Report #: LAKZIKFW

    • This topic was modified 1 year, 6 months ago by emboldtyler. Reason: Adding report number

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support qtwrk

    (@qtwrk)

    function lscwp_before_output( $content ) {
  preg_match_all('/<img[^>]*>/i', $content, $matches);

  foreach ($matches[0] as $match) {
    $cleaned_tag = preg_replace("/\s+/", " ", $match);

    $cleaned_tag = str_replace(array("\r", "\n"), '', $cleaned_tag);

    $content = str_replace($match, $cleaned_tag, $content);
  }
    return  $content;
}
add_filter( 'litespeed_buffer_before', 'lscwp_before_output', 0);

    please add this code to your themes functions.php

    your <img has some line break , that breaks the lazyload replacement , this code should filter and remove the line-break

    Thread Starter emboldtyler

    (@emboldtyler)

    Thank you. Looks like this worked for this specific site. I’ll give it a try tomorrow on a few of the other sites we’re having trouble with in case it’s the same issue.

    Any chance we can expect this in a patch of the plugin or is this function something we’ll need to add on all of our Litespeed Cache sites?

    Plugin Support qtwrk

    (@qtwrk)

    as far as I see , place line-break inside of <img> is quite rare and weird action

    if my memory serves me good , you are the 2nd case I have come across in years , and preg_match_all is kind of “expensive” function , we don’t want to place it , unnecessarily, to sites that doesn’t have such issue.

    Thread Starter emboldtyler

    (@emboldtyler)

    Ah makes sense. So far, just editing the code has worked on the 5 sites I’ve tried it on that were having this issue. Seems like this might be happening from a formatter which tries to break up long lines. If the line is too long, it looks like it swaps this
    <img src="somelongurl" class="some-long-class-list" height="10" width="10">
    to
    <img
    src="somelongurl"
    class="some-long-class-list"
    height="10"
    width="10"
    >

    I think this is a standard thing in most formatters (prettier, etc)

    • This reply was modified 1 year, 6 months ago by emboldtyler.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Lazy Load Breaks Some Images’ is closed to new replies.