Shortcode for resizing images, lazy loading, AND progressive loading, all in one!

Thanks for the links! But I wasn’t posting a question – just some already working code that might maybe help someone looking to do the same thing!

As far as I can tell, the code I posted defers images properly (though I do use a library for lazy loading), and no jQuery is involved :slight_smile:.

The first link is about deferring javascript, while my code is for deferring images. My JS is so small (less than a KB), that I don’t really care (yet) about deferring it. Second link is about deferring images without jQuery, which I’m already not using, though I am using this library which is also less than a KB . It’s also slightly out of date because these days the recommended way is to use the IntersectionObserver with a fallback for browsers it doesn’t work on. Sounded complicated, hence the library.

Code for progressive image loading, i.e. load a low quality placeholder (deferred based on scroll) first and then load the large image in the background, the way Medium does it.

1 Like