Lazy Load placeholders?

  • Resolved benspr

    (@benspr)


    5 years, 3 months ago

    Hi there! Any chance a future version of Autoptimize can include the ability to leave blank “placeholder” space where images would have been, to avoid the problem of lazy-loaded images offsetting anchor links within the page as images that load after click?

    For example, the “link to the page I need help with” takes the user to an anchor, which should work okay, but if the user scrolls up instead of down, the content jumps around the page as images above are loaded. I’d love to just use Autoptimize for lazy loading, but a placeholder feature would be really great!

    Thanks, Ben

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

Viewing 1 replies (of 1 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    There actually is a placeholder added Ben, e.g.

    
<img class="lazyload tip-ribbon" src='data:image/svg+xml,%3Csvg%20xmlns=%22https://www.w3.org/2000/svg%22%20viewBox=%220%200%20%20%22%3E%3C/svg%3E' data-src="https://www.solarpowerrocks.com/wp-content/uploads/2018/01/tip-ribbon.png" alt="yellow tip ribbon">

    Now the problem is that the placeholder (which is inline SVG) takes it’s size from the width and height attributes, which are missing for a lot of images in the HTML, so the placeholder falls back to a default size which is not correct. So if you add width and height attributes to your images, this would work as you expect it to.

    hope this clarifies,
    frank

Viewing 1 replies (of 1 total)
  • The topic ‘Lazy Load placeholders?’ is closed to new replies.