How to check background image loading progress using JavaScript

Few days ago, One of my friends asked me a question about image loading on a page.  When he asked me this question, at first, I thought he was asking about just tracking the progress of an HTML image element.  Later he explained to me that he wanted to track the progress of an image load and set it as a background image.

After doing some research, I found it’s not possible to track a CSS image load using JavaScript. However, Image loading can be track by creating a new Image element using JavaScript. Currently, the image element has the following events:

  • load
  • abort
  • error

So we can only track whether the image is loaded or not by using load event of the image element.  How can we track the progress of an image load? After reading the article from Adobe, I have decided to use XMLHttpRequest and base 64 encoding approach they showed.

XMLHttpRequest has the following events, currently supported most of the modern browser.

  • loadstart
  • progress
  • loadend

 

HTML Code:

 

JavaScript Code:

To see the image progress loading more visually, you can change the network throttle settings on your Chrome DevTools.

Network Throttling

The Network tab in Chrome DevTools has an option to faux throttle your network, so you can experience what your users might experience visiting your website on 3G, 2G and GPRS connections. Besides the obvious, it’s also useful for visualising how fonts load.

  1. Open DevTools (cmd + alt + i)
  2. Click the ‘Network’ tab
  3. Select which type of connection you want to imitate
  4. Reload the page to see assets downloading at that connection speed

More details about Network Throttle. 

 

Leave a Reply

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