Displaying loading progress of element

Question

I am writing a web application that deals with a large image. To make loading of the page a bit responsive, I used the Lazy Load Jquery Plugin. (http://www.appelsiini.net/projects/lazyload).

But It seems what I need is to display the progress of loading of image because the image took more than 20 secs to load.

How I am going to add an event listener for the progress for the img tag? I want display a progress in terms of percentage.

Can you show me an example? or a site that exhibits interlaced image? — user2067373, Feb 13 '13 at 07:09
no, but images file size can be a bit more bigger, quality of picture will be improved as the download advance, full quality will be at full download — r043v, Feb 14 '13 at 13:03
Does this answer your question? [JavaScript loading progress of an image](https://stackoverflow.com/questions/14218607/javascript-loading-progress-of-an-image) — kmoser, Sep 08 '22 at 03:48

score 0 · Answer 1 · answered Feb 13 '13 at 09:57

Other options are to show a low-quality fast-loading image in it's place until Lazy Loading replaces it. If you really want to monitor progress, you'd probably have to do it through AJAX, like this - http://blogs.adobe.com/webplatform/2012/07/10/image-progress-event-progress/

Displaying loading progress of element

1 Answers1