Title: [246094] trunk/Websites/webkit.org
- Revision
- 246094
- Author
- j...@apple.com
- Date
- 2019-06-04 19:21:26 -0700 (Tue, 04 Jun 2019)
Log 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.
Modified Paths
Diff
Modified: trunk/Websites/webkit.org/ChangeLog (246093 => 246094)
--- trunk/Websites/webkit.org/ChangeLog 2019-06-05 01:03:04 UTC (rev 246093)
+++ trunk/Websites/webkit.org/ChangeLog 2019-06-05 02:21:26 UTC (rev 246094)
@@ -1,3 +1,22 @@
+2019-06-04 Jon Davis <j...@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_...@apple.com>
[Web GPU] Add demos to webkit.org
@@ -98,9 +117,9 @@
https://bugs.webkit.org/show_bug.cgi?id=194393
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.
* wp-content/themes/webkit/style.css:
Modified: trunk/Websites/webkit.org/wp-content/themes/webkit/scripts/global.js (246093 => 246094)
--- trunk/Websites/webkit.org/wp-content/themes/webkit/scripts/global.js 2019-06-05 01:03:04 UTC (rev 246093)
+++ trunk/Websites/webkit.org/wp-content/themes/webkit/scripts/global.js 2019-06-05 02:21:26 UTC (rev 246094)
@@ -1,118 +1,41 @@
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 = ""
-
- if (sessionStorage.getItem(src)) {
- setTimeout(function () { stageImage(element, src); }, 1);
- } else {
- var img = new Image();
- img.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');
paddingDiv.classList.add('scrollable-padding');
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();
});
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
