Support » Plugin: Autoptimize » Lazy Loading Picture Element

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

    (@optimizingmatters)

    no, only on <img for now martychc23, maybe in the next version 🙂

    @optimizingmatters – out of curiosity would the lazyloading still be applied to the <img> element within the <picture> (usually used for fallback)?

    So if it were formatted:

    <picture>
        <source srcset="full-size.jpg" media="(min-width: 1024px)">
        <source srcset="large.jpg" media="(min-width: 300px)">
        <source srcset="medium.jpg" media="(min-width: 150px)">
        <img srcset="thumbnail.jpg" alt="Image description">
    </picture>

    Would <img srcset="thumbnail.jpg" alt="Image description"> then become <img srcset="thumbnail.jpg" alt="Image description" class="lazyload"> or is that <img> ignored?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    It would be lazyloaded Will.

    So, that’s good news then – if the class="lazyload" is applied to the img, the whole <picture> element will actually lazyload 🙂

    Apparently it’s the <img> tag that controls the overall lazyloading. <picture class="lazyload"> doesn’t do anything (something I found out myself recently)

    See lines 358 – 377 of lazysizes readme: https://github.com/aFarkas/lazysizes/blame/gh-pages/README.md#L358

    So in theory @optimizingmatters – you’re already supporting the <picture> element lazyloading 😉

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    hmm, I think I’ll have to change the srcset attribute of the <picture>-embedded <source tags into data-srcset to avoid them being loaded too early, no?

    but not too difficult anyhow 🙂

    Thread Starter Anonymous User 14978628

    (@anonymized-14978628)

    no, only on <img for now martychc23, maybe in the next version

    🙂

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    Added on the github-version, you can download the full Github zip here to try it out 🙂

    frank

    Thread Starter Anonymous User 14978628

    (@anonymized-14978628)

    Hey Frank,

    Tested new version with Responsify WP picture element and images appear to be lazy loading correctly. Good work!

    Quick question, I noticed the following when inspecting an image:

    img.ls.is.cached.layloaded

    Are you implementing some caching for lazyloading?

    Also, my current lazy load plugin had this in the release notes:

    Enhancement: Ignore images using the new loading attribute introduce by Chrome for browser-native lazyload

    Has this been implemented in AO to take into consideration the new chrome lazy loading feature?

    Thanks

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    Are you implementing some caching for lazyloading?

    I guess that’s part of lazysizes (the JS library AO uses).

    Has this been implemented in AO to take into consideration the new chrome lazy loading feature?

    that is one of the main changes in lazysizes 5.0.0, of which rc1 was included in AO 2.5.1-beta1 🙂

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Lazy Loading Picture Element’ is closed to new replies.