rav4s
/
portfolio
mirror of https://github.com/Rav4s/portfolio
1
1
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Made lazy loading more efficient for mobile and tablet to reduce lcp

main
Ravi Shah 5 years ago
parent
7f32a61b45
commit
fb7e683ba0
2 changed files with 42 additions and 18 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 37
      gallery.html
  2. 23
      js/gallery-lazy-load.js

37
gallery.html
View File

@ -148,58 +148,58 @@
<div class="gallery"> <div class="gallery">
<figure class="gallery-item gallery-item-1"> <figure class="gallery-item gallery-item-1">
<a href="static/img/gallery/high-res/thinkpad-x220-tablet.jpg"><img src="static/img/gallery/low-res/thinkpad-x220-tablet.jpg" class="gallery-img " alt="Thinkpad X220 Tablet" loading="lazy"></a>
<a href="static/img/gallery/high-res/thinkpad-x220-tablet.jpg"><img src="static/img/gallery/low-res/thinkpad-x220-tablet.jpg" class="gallery-img eager-mobile" id="eager-tablet" alt="Thinkpad X220 Tablet"></a>
</figure> </figure>
<figure class="gallery-item gallery-item-2"> <figure class="gallery-item gallery-item-2">
<a href="static/img/gallery/high-res/power-mac-g4-opened.jpg"><img src="static/img/gallery/low-res/power-mac-g4-opened.jpg" class="gallery-img " alt="Power Macintosh G4 MDD with Opened Side Door" loading="lazy"></a>
<a href="static/img/gallery/high-res/power-mac-g4-opened.jpg"><img src="static/img/gallery/low-res/power-mac-g4-opened.jpg" class="gallery-img eager-mobile" id="eager-tablet" alt="Power Macintosh G4 MDD with Opened Side Door"></a>
</figure> </figure>
<figure class="gallery-item gallery-item-3"> <figure class="gallery-item gallery-item-3">
<a href="static/img/gallery/high-res/garage-door-controller-mounted.JPG"><img src="static/img/gallery/low-res/garage-door-controller-mounted.JPG" class="gallery-img " alt="Raspberry Pi Garage Door Controller Mounted" loading="lazy"></a>
<a href="static/img/gallery/high-res/garage-door-controller-mounted.JPG"><img src="static/img/gallery/low-res/garage-door-controller-mounted.JPG" class="gallery-img eager-mobile" id="eager-tablet" alt="Raspberry Pi Garage Door Controller Mounted"></a>
</figure> </figure>
<figure class="gallery-item gallery-item-4"> <figure class="gallery-item gallery-item-4">
<a href="static/img/gallery/high-res/garage-door-sensor.JPG"><img src="static/img/gallery/low-res/garage-door-sensor.JPG" class="gallery-img " alt="Raspberry Pi Garage Door Sensor" loading="lazy"></a>
<a href="static/img/gallery/high-res/garage-door-sensor.JPG"><img src="static/img/gallery/low-res/garage-door-sensor.JPG" class="gallery-img lazy-mobile" id="eager-tablet" alt="Raspberry Pi Garage Door Sensor"></a>
</figure> </figure>
<figure class="gallery-item gallery-item-5"> <figure class="gallery-item gallery-item-5">
<a href="static/img/gallery/high-res/garage-door-pwa.jpg"><img src="static/img/gallery/low-res/garage-door-pwa.jpg" class="gallery-img " alt="Raspberry Pi Garage Door Progressive Web Application" loading="lazy"></a>
<a href="static/img/gallery/high-res/garage-door-pwa.jpg"><img src="static/img/gallery/low-res/garage-door-pwa.jpg" class="gallery-img lazy-mobile" id="eager-tablet" alt="Raspberry Pi Garage Door Progressive Web Application"></a>
</figure> </figure>
<figure class="gallery-item gallery-item-6"> <figure class="gallery-item gallery-item-6">
<a href="static/img/gallery/high-res/repairability-score-dashboard-mobile-site.jpg"><img src="static/img/gallery/low-res/repairability-score-dashboard-mobile-site.jpg" class="gallery-img " alt="iFixit Repairability Score Dashboard Mobile Website" loading="lazy"></a>
<a href="static/img/gallery/high-res/repairability-score-dashboard-mobile-site.jpg"><img src="static/img/gallery/low-res/repairability-score-dashboard-mobile-site.jpg" class="gallery-img lazy-mobile" id="eager-tablet" alt="iFixit Repairability Score Dashboard Mobile Website"></a>
</figure> </figure>
<figure class="gallery-item gallery-item-7"> <figure class="gallery-item gallery-item-7">
<a href="static/img/gallery/high-res/imac-g5-back-cover-removed.jpg"><img src="static/img/gallery/low-res/imac-g5-back-cover-removed.jpg" class="gallery-img " alt="iMac G5 with Back Cover and Stand Removed for Thermal Paste Replacement" loading="lazy"></a>
<a href="static/img/gallery/high-res/imac-g5-back-cover-removed.jpg"><img src="static/img/gallery/low-res/imac-g5-back-cover-removed.jpg" class="gallery-img lazy-mobile" id="lazy-tablet" alt="iMac G5 with Back Cover and Stand Removed for Thermal Paste Replacement"></a>
</figure> </figure>
<figure class="gallery-item gallery-item-8"> <figure class="gallery-item gallery-item-8">
<a href="static/img/gallery/high-res/imac-g5-side-view.jpg"><img src="static/img/gallery/low-res/imac-g5-side-view.jpg" class="gallery-img " alt="iMac G5 Side View" loading="lazy"></a>
<a href="static/img/gallery/high-res/imac-g5-side-view.jpg"><img src="static/img/gallery/low-res/imac-g5-side-view.jpg" class="gallery-img lazy-mobile" id="lazy-tablet" alt="iMac G5 Side View"></a>
</figure> </figure>
<figure class="gallery-item gallery-item-9"> <figure class="gallery-item gallery-item-9">
<a href="static/img/gallery/high-res/thinkpad-x220-front.JPG"><img src="static/img/gallery/low-res/thinkpad-x220-front.JPG" class="gallery-img " alt="Thinkpad X220 Tablet From View" loading="lazy"></a>
<a href="static/img/gallery/high-res/thinkpad-x220-front.JPG"><img src="static/img/gallery/low-res/thinkpad-x220-front.JPG" class="gallery-img lazy-mobile" id="lazy-tablet" alt="Thinkpad X220 Tablet From View"></a>
</figure> </figure>
<figure class="gallery-item gallery-item-10"> <figure class="gallery-item gallery-item-10">
<a href="static/img/gallery/high-res/hard-drive-failure.jpg"><img src="static/img/gallery/low-res/hard-drive-failure.jpg" class="gallery-img " alt="Hard Drive Failure, Missing Operating System" loading="lazy"></a>
<a href="static/img/gallery/high-res/hard-drive-failure.jpg"><img src="static/img/gallery/low-res/hard-drive-failure.jpg" class="gallery-img lazy-mobile" id="lazy-tablet" alt="Hard Drive Failure, Missing Operating System"></a>
</figure> </figure>
<figure class="gallery-item gallery-item-11"> <figure class="gallery-item gallery-item-11">
<a href="static/img/gallery/high-res/network-wiring.jpg"><img src="static/img/gallery/low-res/network-wiring.jpg" class="gallery-img " alt="Wiring Cat 7 Network Cable over Doorway" loading="lazy"></a>
<a href="static/img/gallery/high-res/network-wiring.jpg"><img src="static/img/gallery/low-res/network-wiring.jpg" class="gallery-img lazy-mobile" id="lazy-tablet" alt="Wiring Cat 7 Network Cable over Doorway"></a>
</figure> </figure>
<figure class="gallery-item gallery-item-12"> <figure class="gallery-item gallery-item-12">
<a href="static/img/gallery/high-res/power-mac-g4-mac-os-9.jpg"><img src="static/img/gallery/low-res/power-mac-g4-mac-os-9.jpg" class="gallery-img " alt="Power Macintosh G4 MDD running Mac OS 9.2.2" loading="lazy"></a>
<a href="static/img/gallery/high-res/power-mac-g4-mac-os-9.jpg"><img src="static/img/gallery/low-res/power-mac-g4-mac-os-9.jpg" class="gallery-img lazy-mobile" id="lazy-tablet" alt="Power Macintosh G4 MDD running Mac OS 9.2.2"></a>
</figure> </figure>
<figure class="gallery-item gallery-item-13"> <figure class="gallery-item gallery-item-13">
<a href="static/img/gallery/high-res/thinkpad-x220-motherboard.jpg"><img src="static/img/gallery/low-res/thinkpad-x220-motherboard.jpg" class="gallery-img " alt="Thinkpad X220 Tablet Motherboard" loading="lazy"></a>
<a href="static/img/gallery/high-res/thinkpad-x220-motherboard.jpg"><img src="static/img/gallery/low-res/thinkpad-x220-motherboard.jpg" class="gallery-img lazy-mobile" id="lazy-tablet" alt="Thinkpad X220 Tablet Motherboard"></a>
</figure> </figure>
<figure class="gallery-item gallery-item-14"> <figure class="gallery-item gallery-item-14">
<a href="static/img/gallery/high-res/grafana-dashboard-imac-g5.jpg"><img src="static/img/gallery/low-res/grafana-dashboard-imac-g5.jpg" class="gallery-img " alt="iMac G5 Grafana Dashboard" loading="lazy"></a>
<a href="static/img/gallery/high-res/grafana-dashboard-imac-g5.jpg"><img src="static/img/gallery/low-res/grafana-dashboard-imac-g5.jpg" class="gallery-img lazy-mobile" id="lazy-tablet" alt="iMac G5 Grafana Dashboard"></a>
</figure> </figure>
<figure class="gallery-item gallery-item-15"> <figure class="gallery-item gallery-item-15">
<a href="static/img/gallery/high-res/LeopardInstall.jpg"><img src="static/img/gallery/low-res/LeopardInstall.jpg" class="gallery-img " alt="Mac OS X 10.5 Leopard Installation on iMac G5" loading="lazy"></a>
<a href="static/img/gallery/high-res/LeopardInstall.jpg"><img src="static/img/gallery/low-res/LeopardInstall.jpg" class="gallery-img lazy-mobile" id="lazy-tablet" alt="Mac OS X 10.5 Leopard Installation on iMac G5"></a>
</figure> </figure>
<figure class="gallery-item gallery-item-16"> <figure class="gallery-item gallery-item-16">
<a href="static/img/gallery/high-res/thinkpad-t500-opened.jpg"><img src="static/img/gallery/low-res/thinkpad-t500-opened.jpg" class="gallery-img " alt="Thinkpad T500 with keyboard removed" loading="lazy"></a>
<a href="static/img/gallery/high-res/thinkpad-t500-opened.jpg"><img src="static/img/gallery/low-res/thinkpad-t500-opened.jpg" class="gallery-img lazy-mobile" id="lazy-tablet" alt="Thinkpad T500 with keyboard removed"></a>
</figure> </figure>
<figure class="gallery-item gallery-item-17"> <figure class="gallery-item gallery-item-17">
<a href="static/img/gallery/high-res/thinkpad-family-top.jpg"><img src="static/img/gallery/low-res/thinkpad-family-top.jpg" class="gallery-img " alt="Thinkpad X220T, T440s, T580, and T500" loading="lazy"></a>
<a href="static/img/gallery/high-res/thinkpad-family-top.jpg"><img src="static/img/gallery/low-res/thinkpad-family-top.jpg" class="gallery-img lazy-mobile" id="lazy-tablet" alt="Thinkpad X220T, T440s, T580, and T500"></a>
</figure> </figure>
<figure class="gallery-item gallery-item-18"> <figure class="gallery-item gallery-item-18">
<a href="static/img/gallery/high-res/alligator.jpg"><img src="static/img/gallery/low-res/alligator.jpg" class="gallery-img " alt="An alligator. What more is there to say?" loading="lazy"></a>
<a href="static/img/gallery/high-res/alligator.jpg"><img src="static/img/gallery/low-res/alligator.jpg" class="gallery-img lazy-mobile" id="lazy-tablet" alt="An alligator. What more is there to say?"></a>
</figure> </figure>
</div> </div>
@ -218,6 +218,7 @@
</div> </div>
</div> </div>
<script src="js/gallery-lazy-load.js"></script>
<script src="js/expandnavbar.js " defer></script> <script src="js/expandnavbar.js " defer></script>
</body> </body>

23
js/gallery-lazy-load.js
View File

@ -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");
}
}
Write Preview
Loading…
Cancel
Save