Skip to content

Instantly share code, notes, and snippets.

View mswarrior's full-sized avatar

Aris Ordonez mswarrior

View GitHub Profile
@optimalisatie
optimalisatie / lazy-instant-render.js
Last active December 25, 2022 09:04
Image lazy loading with instant visibility of in-view images on page load (MutationObserver)
// Performance tests such as Google Lighthouse often complain about below the fold images while lazy loading
// techniques may introduce a flash effect for images on bigger screens
// This snippet shows a solution to instantly display images as if loaded using src="" while maintaining
// the lazy loading benefit on smaller screens.
// Tip: a second and potentially better technique is to rewrite lazy loaded images to regular src="" images in a Service Worker.
// this snippet depends on in-view (5kb)
// @link https://github.com/camwiegert/in-view/