From fb7e683ba0ace756de4fd80dd6829c3b1deee312 Mon Sep 17 00:00:00 2001 From: rav4s Date: Tue, 16 Feb 2021 21:10:57 -0600 Subject: [PATCH] Made lazy loading more efficient for mobile and tablet to reduce lcp --- gallery.html | 37 +++++++++++++++++++------------------ js/gallery-lazy-load.js | 23 +++++++++++++++++++++++ 2 files changed, 42 insertions(+), 18 deletions(-) create mode 100644 js/gallery-lazy-load.js diff --git a/gallery.html b/gallery.html index e2ff844..08e1775 100644 --- a/gallery.html +++ b/gallery.html @@ -148,58 +148,58 @@
- Thinkpad X220 Tablet + Thinkpad X220 Tablet
- Power Macintosh G4 MDD with Opened Side Door + Power Macintosh G4 MDD with Opened Side Door
- Raspberry Pi Garage Door Controller Mounted + Raspberry Pi Garage Door Controller Mounted
- Raspberry Pi Garage Door Sensor + Raspberry Pi Garage Door Sensor
- Raspberry Pi Garage Door Progressive Web Application + Raspberry Pi Garage Door Progressive Web Application
- iFixit Repairability Score Dashboard Mobile Website + iFixit Repairability Score Dashboard Mobile Website
- iMac G5 with Back Cover and Stand Removed for Thermal Paste Replacement + iMac G5 with Back Cover and Stand Removed for Thermal Paste Replacement
- iMac G5 Side View + iMac G5 Side View
- Thinkpad X220 Tablet From View + Thinkpad X220 Tablet From View
- Hard Drive Failure, Missing Operating System + Hard Drive Failure, Missing Operating System
- Wiring Cat 7 Network Cable over Doorway + Wiring Cat 7 Network Cable over Doorway
- Power Macintosh G4 MDD running Mac OS 9.2.2 + Power Macintosh G4 MDD running Mac OS 9.2.2
- Thinkpad X220 Tablet Motherboard + Thinkpad X220 Tablet Motherboard
- iMac G5 Grafana Dashboard + iMac G5 Grafana Dashboard
- Mac OS X 10.5 Leopard Installation on iMac G5 + Mac OS X 10.5 Leopard Installation on iMac G5
- Thinkpad T500 with keyboard removed + Thinkpad T500 with keyboard removed
- Thinkpad X220T, T440s, T580, and T500 + Thinkpad X220T, T440s, T580, and T500
- An alligator. What more is there to say? + An alligator. What more is there to say?
@@ -218,6 +218,7 @@ + diff --git a/js/gallery-lazy-load.js b/js/gallery-lazy-load.js new file mode 100644 index 0000000..cb5345f --- /dev/null +++ b/js/gallery-lazy-load.js @@ -0,0 +1,23 @@ +const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0) + +if (vw <= 1000 && vw >= 500) { + lazy = document.querySelectorAll('[id="lazy-tablet"]') + eager = document.querySelectorAll('[id="eager-tablet"]') + for (var i = 0; i < lazy.length; i++) { + lazy[i].setAttribute("loading", "lazy"); + } + for (var i = 0; i < eager.length; i++) { + eager[i].setAttribute("loading", "eager"); + } +} + +if (vw <= 500) { + lazy = document.querySelectorAll("img.lazy-mobile") + eager = document.querySelectorAll("img.eager-mobile") + for (var i = 0; i < lazy.length; i++) { + lazy[i].setAttribute("loading", "lazy"); + } + for (var i = 0; i < eager.length; i++) { + eager[i].setAttribute("loading", "eager"); + } +} \ No newline at end of file