Image Lazy Loading


Lazy loading images is a practice that’s been popular for a decade and for good reason: images are usually the heaviest downloads on a given webpage and avoiding unloading images that are never seen saves the user bandwidth. There are plugins for lazy loading images in every JavaScript framework, or you could use Intersection Observer API, but it’s become such a common practice that there should probably be a browser API to accommodate it…and Chrome is implementing just that. Let’s have a look at how the incoming native lazy loading API will work!

This new lazy loading API come down to a simple loading="lazy" attribute and value on img tags:

<img src="http://davidwalsh.name/path/to/logo.png" loading="lazy">

To experiment with this new API, you can add an onLoad attribute to the image:

<img src="http://davidwalsh.name/path/to/logo.png" loading="lazy"  onload="alert('Loaded!');">

When the user scrolls within range of the image, the download and render is triggered. There are three values for this attribute:

  • auto – the default behavior for image loading today
  • lazy – loads the image when it becomes visible based on scroll position
  • eager – loads the image immediately regardless of scroll position

Have a look at this demo of loading="lazy":

See the Pen jOOoLXO by David Walsh (@darkwing) on CodePen.

Adding a native API for an ages old pattern is something I’m excited about — it reminds me of the MooTools days which triggered the HTML5 revolution of adding what we know we’ve needed forever. What are your thoughts on this new implementation?

  • Create Spinning Rays with CSS3: Revisited
  • 9 More Mind-Blowing WebGL Demos
  • Select Dropdowns, MooTools, and CSS Print

    Select Dropdowns, MooTools, and CSS Print

    I know I’ve harped on this over and over again but it’s important to enhance pages for print. You can do some things using simple CSS but today’s post features MooTools and jQuery. We’ll be taking the options of a SELECT element and generating…

  • Skype-Style Buttons Using MooTools


Source link

Leave a Reply

Your email address will not be published. Required fields are marked *

Powered by WordPlace