/    Sign up×
Community /Pin to ProfileBookmark

Newby: Having a problem with updating a progress bar.

Copy linkTweet thisAlerts:
May 02.2005

I am preloading images to use later. This workd fine. I would like to show a progress bar while the images are preloading. I have 8 images to preload.

In the body I placed an image and named it “ProgressBar”. I created 10 jpegs each a little longer than the previous that make up the progress bar. ProgressBar1.jeg is the 10% image and ProgressBar2.jpeg is the 20% progress bar image and so on.

My problem is that when I replace the original image with the 20% image nothing happens. It doesn’t show up. I do not get an error.

Here is the actual code ( it is in the body section) :
<img src=”Images/progressbar1.jpg” name=”ProgressImage” width=”12″ height=”12″ id=”ProgressImage”>

<script language=”javascript”>
image01= new Image();
image01.src=”Images/portfolio_ images/DSCN0481.JPG”;
document.images.ProgressImage.src=”Images/progressbar2.jpg”;
</script>
The main image “image01” preloads properly but the progressbar image does not load.

Am not sure why. Any ideas would be greatly appreciated.

TIA

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@felgallMay 02.2005 — The images for your progress bar need to be preloaded before the images that you are preloading where you display the progress bar. Of course if you want to display a progress bar while the progress bar images are preloading then you will need to preload the images for that before you preload the progress bar images.

Your images will load much faster without the progress bar. If your images are properly optimized then they should only take a few seconds to load even on a dialup connection.
Copy linkTweet thisAlerts:
@UltimaterMay 02.2005 — I'd personally use a table with colors to show the loading-progress in-place-of images.

I've created images before on my webpage w/o using existing images but rather creating them color by color pixel by pixel inside of a table. You don't really need to go that far, but you can make 10 boxes or so at the size of 25x25 rather than 1x1.

As far as detecting the progess, you can use an update statement in-between each statement:
<i>
</i>image01= new Image();
image01.src="Images/portfolio_ images/DSCN0481.JPG";
[color=royalblue]preformSomeKindOfUpdate()[/color]
×

Success!

Help @Bubba spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...