Changeset 246094 in webkit

Timestamp:

Jun 4, 2019 7:21:26 PM (5 years ago)

Author:

Jon Davis

Message:

Improve performance of the lazy image loader
​https://bugs.webkit.org/show_bug.cgi?id=198530

Reviewed by Devin Rousso.

• wp-content/themes/webkit/scripts/global.js:

(enableScrollableTables):
(lazyLoadImages):
(findParentMenu): Deleted.
(i.m.menus.m.targetMenu.targetMenuClass.indexOf): Deleted.
(inView): Deleted.
(): Deleted.
(loadImage.else.img.onload): Deleted.
(loadImage): Deleted.
(onMovement): Deleted.
(updateImages): Deleted.

Location:

trunk/Websites/webkit.org

Files:

• ChangeLog (modified) (2 diffs)
• wp-content/themes/webkit/scripts/global.js (modified) (2 diffs)

trunk/Websites/webkit.org/ChangeLog

@@ +1 @@
+2019-06-04  Jon Davis  <jond@apple.com>
+
+        Improve performance of the lazy image loader
+        https://bugs.webkit.org/show_bug.cgi?id=198530
+
+        Reviewed by Devin Rousso.
+
+        * wp-content/themes/webkit/scripts/global.js:
+        (enableScrollableTables):
+        (lazyLoadImages):
+        (findParentMenu): Deleted.
+        (i.m.menus.m.targetMenu.targetMenuClass.indexOf): Deleted.
+        (inView): Deleted.
+        (): Deleted.
+        (loadImage.else.img.onload): Deleted.
+        (loadImage): Deleted.
+        (onMovement): Deleted.
+        (updateImages): Deleted.
+
 2019-05-06  Justin Fan  <justin_fan@apple.com>
 
@@ -99 +118 @@
 
         Reviewed by Devin Rousso.
-        
+
         The short viewport breakpoint styles should apply for small width
-        windows as well, and pagination styles need to accommodate wrapped 
+        windows as well, and pagination styles need to accommodate wrapped
         text labels.
 

trunk/Websites/webkit.org/wp-content/themes/webkit/scripts/global.js

@@ -1 +1 @@
 document.addEventListener('DOMContentLoaded', function () {
-    var openClass = ' open-menu',
-        menuClass = 'menu-item-has-children',
-        menus = document.querySelectorAll('#site-nav > div > .menu > .menu-item'),
-        menuLinks = document.querySelectorAll('#site-nav > div > .menu > .menu-item > a'),
-        menuitems = document.querySelectorAll('#site-nav .menu-item-has-children .menu-item > a');
-
-    function findParentMenu (element, className) {
-        while ( (element = element.parentElement) && ! element.classList.contains(className) );
-        return element;
-    }
-
-    for (var i = 0; i < menuLinks.length; ++i) {
-        menuLinks[i].addEventListener('focus', function (e) {
-            var openMenus = findParentMenu(e.target, 'menu').getElementsByClassName(openClass.trim());
-            for (var m = 0; m < openMenus.length; ++m) {
-                openMenus[m].className = openMenus[m].className.replace(openClass, "");
-            }
-        });
-    }
-
-    for (var i = 0; i < menuitems.length; ++i) {
-        menuitems[i].addEventListener('focus', function (e) {
-            var targetMenu = findParentMenu(e.target, menuClass),
-                targetMenuClass = null;
-
-            if ( targetMenu != undefined )
-                targetMenuClass = targetMenu.className;
-
-            for (var m = 0; m < menus.length; ++m) {
-                menus[m].className.replace(openClass, "");
-                if (menus[m] == targetMenu) {
-                    if (targetMenuClass.indexOf(openClass) == -1) {
-                        targetMenu.className += openClass;
-                    }
-                } else {
-                    menus[m].className = menus[m].className.replace(openClass, "");
-                }
-            }
-        });
-    }
-
-    var latest = [], updating = false;
-    function inView(element) {
-        var box = element.getBoundingClientRect();
-        return ( (box.top >= 0 && box.left >= 0 && box.top) <= (window.innerHeight || document.documentElement.clientHeight));
-    }
-
-    function stageImage(element, src) {
-        element.style.backgroundImage = 'url(' + src + ')';
-        if (!element.parentElement.classList.contains('loaded'))
-            element.parentElement.classList.add('loaded');
-    }
-
-    function loadImage(element) {
-        var src = element.getAttribute('data-url');
-
-        if (sessionStorage.getItem(src)) {
-            setTimeout(function () { stageImage(element, src); }, 1);
-        } else {
-            var img = new Image();
-            img.src = src;
-            img.onload = function() {
-                stageImage(element,src);
-
-                try {
-                    sessionStorage.setItem(src, true);
-                } catch (error) {
-                    return false; // private browsing
-                }
-                img = undefined;
-            }
-        }
-
-    }
-
-    function onMovement() {
-        if (!updating)
-            requestAnimationFrame(updateImages);
-        updating = true;
-    }
-
-    function updateImages() {
-        updating = false;
-
-        for (var i = 0; i < imgs.length; i++) {
-            if ( inView(imgs[i]) )
-                loadImage(imgs[i]);
-        }
-
-    }
 
     function enableScrollableTables () {
-        var tables = document.querySelectorAll('.bodycopy > table');
-        var tableCount = tables.length;
+        let tables = document.querySelectorAll('#content .bodycopy > table');
 
-        for (var i = 0; i < tableCount; i++) {
-            var scrollableDiv = document.createElement('div');
-            var paddingDiv = document.createElement('div');
+        for (let table of tables) {
+            let scrollableDiv = document.createElement('div');
+            let paddingDiv = document.createElement('div');
 
             scrollableDiv.classList.add('scrollable');
@@ -103 +12 @@
 
             scrollableDiv.appendChild(paddingDiv);
-            tables[i].parentNode.insertBefore(scrollableDiv, tables[i]);
+            table.parentNode.insertBefore(scrollableDiv, table);
 
-            paddingDiv.appendChild(tables[i]);
+            paddingDiv.appendChild(table);
         }
     }
 
-    var imgs = document.querySelectorAll('div[data-url]');
-    document.addEventListener('scroll', onMovement);
-    document.addEventListener('resize', onMovement);
+    function lazyLoadImages () {
+        let backgroundImages = document.querySelectorAll('#content div[data-url]');
+        if (backgroundImages.length == 0)
+            return;
+        let lazyloadImageObserver = new IntersectionObserver(function (changes) {
+            for (let change of changes) {
+                if (!change.isIntersecting)
+                    return;
+                change.target.style.backgroundImage = 'url(' + change.target.getAttribute('data-url') + ')';
+                change.target.parentElement.classList.add('loaded');
+                lazyloadImageObserver.unobserve(change.target);
+            }
+        });
+        for (let element of backgroundImages)
+            lazyloadImageObserver.observe(element);
+    }
 
-    updateImages();
+    if (window.IntersectionObserver)
+        lazyLoadImages();
     enableScrollableTables();