From c0a7bb5aba676466943a3d645e42a12f10e04b99 Mon Sep 17 00:00:00 2001 From: Simon Pieters Date: Tue, 5 May 2020 14:26:42 +0200 Subject: [PATCH] Check intersection of lazy images from "update the rendering" Fixes #5236. --- source | 60 +++++++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 53 insertions(+), 7 deletions(-) diff --git a/source b/source index addfb3a9d48..2ec68af6bed 100644 --- a/source +++ b/source @@ -27456,12 +27456,7 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ...

If img's lazy loading attribute is in the Lazy state, img does not intersect the - viewport, and img is not about to intersect the viewport, then - return true.

- -

This allows for fetching the image during scrolling, when it does not, but is - about to intersect the viewport.

+ data-x="attr-loading-lazy-state">Lazy state, then return true.

  • Return false.

    • @@ -27471,6 +27466,45 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ...in parallel, it needs to queue a task to do so.

    +

    Each img element have a boolean flag ready to be lazy loaded, initially + false.

    + +

    For img elements that will + lazy load, this flag can be set to true in the update the rendering steps, + which causes the image to load by continuing the update the image data steps.

    + +

    Each Document has a list of list of lazy loading images that + need intersection observation, initially empty.

    + +

    This list is added to in the update the image data steps, and checked + in the run the lazy load intersection steps, which is called from the update + the rendering steps.

    + +

    The run the lazy load intersection steps steps for a Document are as + follows:

    + +
      +
    1. +

      For each img in the Document's + list of lazy loading images that need intersection observation:

      + +
        +
      1. +

        If img intersects the + viewport, or img is about to intersect the viewport, then set + img's ready to be lazy loaded flag to true.

        + +

        This allows for fetching the image during scrolling, when it does not, but is + about to intersect the viewport.

        +
        2. +

      2. Otherwise, observe img for intersection.

        3. +
      +
      2. + +

    2. Empty the list of lazy loading images + that need intersection observation.

      3. +
    +

    When the user agent is to update the image data of an img element, optionally with the restart animations flag set, it must run the following steps:

    @@ -27692,11 +27726,19 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ...
      +

    1. Add the img element to its node document's list of + lazy loading images that need intersection observation, if it isn't already + present.

      2. +

    2. Continue running this algorithm in parallel.

      3. -

    3. Wait until the will lazy load image steps no longer return true, given the +

    4. Wait until the img's ready to be lazy loaded flag is + true, or until the will lazy load image steps no longer return true, given the img.

      5. +

    5. Remove the img element from its node document's list of + lazy loading images that need intersection observation, if it is present.

      6. +

    6. Queue an element task on the DOM manipulation task source given the img element to continue running the rest of this algorithm.

    @@ -89317,6 +89359,10 @@ dictionary PromiseRejectionEventInit : EventInit { the animation frame callbacks for that Document, passing in now as the timestamp.

    +

  • For each fully active Document in docs, run + the lazy load intersection steps for that Document, passing in + now as the timestamp.

    • +

  • For each fully active Document in docs, run the update intersection observations steps for that Document, passing in now as the timestamp.