Lazy Load Images with Echo.js

Images are some of the specific drivers of increased page load times. Improperly sized images can cause significant issues as your users must wait and wait as the images load. Research regularly indicates that the longer a user must wait for the page to load (especially on mobile), the greater the chance they will simply leave. Because of this, it's more important than ever to make sure your images are optimized in terms of dimensions and that your UI can load within a reasonable amount of time.

The problems described above are particularly relevant on pages where there's a great deal of multimedia content. Blog rolls, galleries, and similar feed based pages all tend to have multiple images that can continue well below the fold. Even though a user won't see these items upon page load, they will nonetheless still cause loading delays. A fantastic solution is to essentially lazy load your images so that they (1) won't actually load until a user encounters there physical space and (2) only the most essential images are displayed on page load. This can significant drive your page load times down, increase user engagement, and create better web experiences.

A fantastic solution is offered in Echo.js. With this standalone script, you can easily add a placeholder loading image while your main images are only initiated when the user's viewpoint accesses them. The overall effect is a graceful lazy loading display that significantly improves your sites functional accessibility.

Below is the HTML, CSS, and JavaScript required.

Step 1 - lazy-load-images.html

Copy and paste the following code into lazy-load-images.html

There are two key concepts represented in the above HTML. First, the placeholder loading image is used as the "src" attribute. Second, the actual image is contained within the "data-echo" attribute. Echo.js will check for the data-echo attribute and use that for the image when it needs to load.

Step 2 - lazy-load-images.css

Download the CSS below and include it in your web page

Step 3 - news-slider.js

Copy and paste the code below into your HTML file.

You will simply need to add the above JavaScript to initiate the Echo.js script. Make sure to include it on the page to ensure everything will properly work.

Step 4 - Add the following includes to your web page

Voilà! You know will be able to easily lazy load images and cut down of your load times. Feel free to create a custom placeholder graphic that matches the design of your site. Enjoy!