Show Progress Bar For Image Load

Question

Good Evening,

I am building a website and I will be loading images from a remote website. Right now the page is blank until the images completely load. I was hoping someone can show me an easy to to show progress of the images being loaded either by a percentage number or using something like a bootstrap progress bar.

Right now I am using pure HTML:

<img src="http://www.someWebSite.com/testImage.png" alt="Test">

Any Recommendations?

you want to make image become progress bar? – Fiido93 Oct 07 '16 at 03:26 — Fiido93, Oct 07 '16 at 03:26

score 0 · Answer 1 · answered Oct 07 '16 at 04:26

I would recommend using bootstrap(or any other framework). Using JQuery to make psuedo code

('#yourDiv').append(#loading);
('#yourImage').onLoad(function(){
     ('#yourDiv').append(#yourImage);
     ('#yourDiv').delete(#loading)
});

Where

yourDiv is the parent div,
Loading is loading animation
yourImage is the html image

score -1 · Answer 2 · edited May 23 '17 at 10:34

-1

Check out this thread which explains how to display load progress of an image JavaScript loading progress of an image

edited May 23 '17 at 10:34

Community

1
1

answered Oct 07 '16 at 06:36

anulaibar

310
2
9

This should be a comment – Ojonugwa Jude Ochalifu Jun 29 '19 at 16:48

Show Progress Bar For Image Load

2 Answers2