Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

loading multiple images

Status
Not open for further replies.
sirlojik

sirlojik

Programmer
Joined
Mar 29, 2005
Messages
178
Location
UG
Hi all, i have a script that loads 78 image files into the web browser. os-weblib.sourceforge.net. the package zip can be found here; os-weblib.sourceforge.net/webos.zip. The images are mostly under 2kb, how can i get it to load faster. is there a way i could download a bundle of images at once.

---------------------------
 
Sort by date Sort by votes
What are you using now to load the images? Show your code so we can see what can be improved, if anything.

Lee
 
Upvote 0 Downvote
There are ways to ensure that the images get stored in the web servers cache as well so they load from there rather than reading from disk every time the page loads, you will have to search for info on caching images on the server.

You can use an image pre-load script that loads all the images before they begin to display on the screen. That does not really speed things up but it does stop the screen from partially displaying and constantly filling in bits as the images load.

And you KNOW this was coming... Try using fewer images on the page. Heavily graphic intensive pages are just bad practice if there is a way to avoid it. Not always possible though I understand but that is when you look at alternatives like trying to trim down the overall file size of the image or using thumbnails that link to the larger ones etc.

Good luck.



It's hard to think outside the box when I'm trapped in a cubicle.
 
Upvote 0 Downvote
Hi all,
when you go to . I have over-come, my speed constraints and the web page is more responsive. Do you think if i postloaded the images using ajax or an iframe would give me more response? what is this server caching and how can it help me. i have tried to search about it but i keep diving into details of server side programming and get lost. some point me to the right way.

---------------------------
 
Upvote 0 Downvote
I went to the link above and two minutes later it got to (317 items remaining) then started loading the rest of those items relatively quickly but still it took over 5 minutes to load the entire page.
And every time I hover over an item on the page it starts downloading hundreds more items.

I suspect your increase in speed is the result of your browser caching the page content so it loads locally instead of downloading from the server.

Using an image preload script you create an image array object in the client-side code and then load the image into that object. From your page you refer to the image array object instead of the direct path to the file on the server so the image loads directly from memory instead of having to load the image from the server each time.
It takes just as long for the initial load but does not then have the overhead of transfering the file from the server every time.



It's hard to think outside the box when I'm trapped in a cubicle.
 
Upvote 0 Downvote
hmmm....im failing to get it faster even if i preload the images as oppposed to postloading...dang, i can't believe it!! any suggestions. i do take care of the overhead though

---------------------------
 
Upvote 0 Downvote
Are you preloading into an array then pulling the images from that array? That makes the images local to the PC and already in memory. Takes a long time to download but then swapping images should be very fast.


It's hard to think outside the box when I'm trapped in a cubicle.
 
Upvote 0 Downvote
yes, i have implemented a few neat tricks, don't know whether it improved performance. i preload a small gif(spacer.gif) append it to every img Node, as i post load the real images. when postloading is done. it causes a window element refresh.

tell me if it works better compared to the old technique.

---------------------------
 
Upvote 0 Downvote
It's totally unusable on my end. It takes more than 5 minutes to load and then each time you move the mouse over another element it begins loading many more files again.

It looks like every file is being loaded directly from the server even when you are loading the same image 100+ times.
Even though the image is small going out to the server for retrieval is killing any kind of performance.

Are you not storing the image in a client side array and calling it from there?
It's taking forever just to download all the copies of the spacer1.gif every time the mouse moves.


It's hard to think outside the box when I'm trapped in a cubicle.
 
Upvote 0 Downvote
theniteowl, all the code is dynamically created using createElement, and my window script uses about 350+ elements(hidden included). That is probably why it say XXX items remaining. Do you still get the site loading in over 5 minutes. and is the site a bit responsive? please lemme know..

thanx mate

---------------------------
 
Upvote 0 Downvote
I just fired up my other box and tested in Firefox and it loads much quicker there and is usable though a bit slow.
When I try it in IE 6 it takes a VERY long time to load and then a long time again when any action is taken like hovering over a menu item.

I have not looked at your code but are you using CSS to handle hover events?
I know there is a problem with IE that can make it load images freshly from the server rather than from the browser when the images were setup in the CSS. On a regular page this causes flicker as small images on the screen are swapped for the hover effect but on a site like yours it could be causing the fresh reload of all the images involved.

Testing a bit more here is what I get.
On my Win2K box with IE 6.0.2800 even after the page is done loading moving over the File option starts the browser loading objects and on the status bar it shows (148 objects remaining).....

However, on my XP Pro box with IE 6.0.2900 the page takes a while to load but once it has loaded I do not get the same problem as on the other box and the page is about as responsive as it was in Firefox (which is also on the XP Pro box).




It's hard to think outside the box when I'm trapped in a cubicle.
 
Upvote 0 Downvote
Hi everyone,
Thanx a lot for your feedback. I have just twicked the library and manually placed a refresh button incase of long wait times. you can visit the site by going here


please lemme know, in otherwords...critisize.

cheers

---------------------------
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

waubain
  • Locked
  • Question Question
id tag not loading new data with new ajax call
Replies
4
Views
568
waubain
waubain
keisha1
  • Locked
  • Question Question
How can I append/insert multiple text files into one .dbf file using java script /html command
Replies
1
Views
444
Samthyr
Samthyr
lupidol
  • Locked
  • Question Question
Alternate images not working
Replies
2
Views
253
lupidol
lupidol
southbeach
  • Locked
  • Question Question
Using multiple jquery .dialog() with custom themes each
Replies
2
Views
302
southbeach
southbeach
audiopro
  • Locked
  • Question Question
Multiple Draggable Markers on Google Maps
Replies
0
Views
233
audiopro
audiopro

Part and Inventory Search

Sponsor

Back
Top