Lazy Load Images with Echo.js
Images are some of the specific drivers of increased page load times. With Echo.js, you can institute graceful lazy loading that significantly improves your sites functional accessibility.
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.
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 pagelazy-load-images.css
Step 3 - news-slider.js
Copy and paste the code below into your HTML file.
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!