tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

image-loading-lazy.html (4827B)

      1 <!DOCTYPE html>
      2 <head>
      3  <title>Images with loading='lazy' load only when in the viewport</title>
      4  <link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org">
      5  <link rel="author" title="Scott Little" href="mailto:sclittle@chromium.org">
      6  <link rel="help" href="https://github.com/scott-little/lazyload">
      7  <script src="/resources/testharness.js"></script>
      8  <script src="/resources/testharnessreport.js"></script>
      9 </head>
     10 
     11 <script>
     12  const in_viewport_test =
     13    async_test("In-viewport loading=lazy images load immediately but do not " +
     14               "block the window load event");
     15  const below_viewport_test =
     16    async_test("Below-viewport loading=lazy images only load when in the " +
     17               "viewport and do not block the window load event");
     18  const below_viewport_data_url_test =
     19    async_test("Below-viewport data:url images only load when in the " +
     20               "viewport and do not block the window load event");
     21  const below_viewport_blob_url_test =
     22    async_test("Below-viewport blob URL images only load when in the " +
     23               "viewport and do not block the window load event");
     24 
     25  document.addEventListener('DOMContentLoaded', e => {
     26    const img = document.querySelector('#below_viewport_blob_url');
     27 
     28    // Blob URL helper.
     29    // Source: https://bl.ocks.org/nolanlawson/0eac306e4dac2114c752.
     30    function fixBinary(bin) {
     31      const length = bin.length;
     32      const buf = new ArrayBuffer(length);
     33      const arr = new Uint8Array(buf);
     34      for (var i = 0; i < length; i++) {
     35        arr[i] = bin.charCodeAt(i);
     36      }
     37 
     38      return buf;
     39    }
     40 
     41    const base64 =
     42      "R0lGODlhDAAMAKIFAF5LAP/zxAAAANyuAP/gaP///wAAAAAAACH5BAEAAAUALAAAAAAMAAwAAAMlWLPcGjDKFYi9lxKBOaGcF35DhWHamZUW0K4mAbiwWtuf0uxFAgA";
     43    const binary = fixBinary(atob(base64));
     44    const blob = new Blob([binary], {type: 'image/png'});
     45    const url = URL.createObjectURL(blob);
     46    img.src = url;
     47  }) // DOMContentLoaded.
     48 
     49  let has_window_load_fired = false;
     50  let has_in_viewport_loaded = false;
     51 
     52  window.onload = e => {
     53    has_window_load_fired = true;
     54  }
     55 
     56  // Helper assertion messages for the below tests.
     57  const kScrollAssertion = "images only load when scrolled into view";
     58  const kWindowLoadAssertion = "images do not block the load event";
     59 
     60  const in_viewport_img_onload = in_viewport_test.step_func_done(() => {
     61    has_in_viewport_loaded = true;
     62    document.querySelector('#bottom').scrollIntoView();
     63    assert_true(has_window_load_fired,
     64                "In-viewport loading=lazy images do not block the window " +
     65                "load event");
     66  });
     67 
     68  const below_viewport_img_onload = below_viewport_test.step_func_done(() => {
     69    assert_true(has_in_viewport_loaded,
     70                "Below-viewport loading=lazy images only load once loaded " +
     71                "into the viewport");
     72    assert_true(has_window_load_fired,
     73                "Below-viewport loading=lazy images should not block the " +
     74                "window load event");
     75  });
     76 
     77  const below_viewport_data_url_img_onload = below_viewport_data_url_test.step_func_done(() => {
     78    assert_true(has_in_viewport_loaded,
     79                "Below-viewport loading=lazy data: url images " +
     80                kScrollAssertion);
     81    assert_true(has_window_load_fired,
     82                "Below-viewport loading=lazy data: url images " +
     83                kWindowLoadAssertion);
     84  });
     85 
     86  const below_viewport_blob_url_img_onload = below_viewport_blob_url_test.step_func_done(() => {
     87    assert_true(has_in_viewport_loaded,
     88                "Below-viewport loading=lazy blob url images " +
     89                kScrollAssertion);
     90    assert_true(has_window_load_fired,
     91                "Below-viewport loading=lazy blob url images " +
     92                kWindowLoadAssertion);
     93  });
     94 </script>
     95 
     96 <body>
     97  <!-- |in_viewport| takes 2 seconds to load, so that in browsers that don't
     98       support lazy loading, |below_viewport| finishes before |in_viewport|, and
     99       the test will dependably fail without relying on a timeout. -->
    100  <img id="in_viewport" loading="lazy" src="resources/image.png?image-loading-lazy-first&pipe=trickle(d2)"
    101       onload="in_viewport_img_onload()">
    102  <div style="height:1000vh;"></div>
    103  <img id="below_viewport" loading="lazy" src="resources/image.png?image-loading-lazy-second"
    104       onload="below_viewport_img_onload()">
    105  <img id="below_viewport_data_url" loading="lazy"
    106       src="data:image/png;base64,R0lGODlhDAAMAKIFAF5LAP/zxAAAANyuAP/gaP///wAAAAAAACH5BAEAAAUALAAAAAAMAAwAAAMlWLPcGjDKFYi9lxKBOaGcF35DhWHamZUW0K4mAbiwWtuf0uxFAgA"
    107       onload="below_viewport_data_url_img_onload()">
    108  <!-- This image has its `src` set to a blob URL dynamically above -->
    109  <img id="below_viewport_blob_url" loading="lazy"
    110       onload="below_viewport_blob_url_img_onload()">
    111  <div id="bottom"></div>
    112 </body>