w3b3 / angular-demo

Demo application with purpose of showcasing Angular and modern web platform features
https://angular-pwa-repo.firebaseapp.com/
0 stars 0 forks source link

Lazy load images all (maybe focus on mobile-first behavior) #4

Open w3b3 opened 5 years ago

w3b3 commented 5 years ago

I wonder if it's interesting to have a more aggressive lazy-load strategy for images if the user is on mobile. If it's a desktop, most likely the network conditions are better (as it is the computing power)

w3b3 commented 5 years ago

const observer = new IntersectionObserver(function(records, observer) { records.forEach(function(record) { const el = record.target; if (!el.src && record.isIntersecting) { el.src = el.dataset.src; delete el.dataset.src; observer.unobserve(el); } });

w3b3 commented 5 years ago

https://github.com/GoogleChromeLabs/puppeteer-examples/blob/cd58046e310c5b266e5a8b3440a29c579b244753/html/lazyload.html