473,320 Members | 1,876 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Preloading images

Hi folks.

I am about to embark on creating a slideshow using javascript and css.

I was wondering what do people consider the best way to preload the
images to be used within the show.

I saw a technique where the images were stored in 1 px by 1px divs
with overflow set to hidden.

I am sure there are other methods as well. I know in years gone by I
used to see the images stored in an array (javascript).

Any suggestions?

Thanks in advance,
Terry

Nov 6 '07 #1
4 1466
On Nov 6, 5:56 pm, Terry <w...@rogers.comwrote:
Hi folks.

I am about to embark on creating a slideshow using javascript and css.

I was wondering what do people consider the best way to preload the
images to be used within the show.

I saw a technique where the images were stored in 1 px by 1px divs
with overflow set to hidden.

I am sure there are other methods as well. I know in years gone by I
used to see the images stored in an array (javascript).

Any suggestions?

Thanks in advance,
Terry
I'm pretty sure it's the best way to store them in an array. You don't
really want the browser to parse HTML code in vain? Although the user
won't see them, the browser will have to parse the code and display it
somewhere. They also can get in the way when designing the flow of
other elements.

Nov 7 '07 #2
On Nov 7, 2:56 am, Terry <w...@rogers.comwrote:
Hi folks.

I am about to embark on creating a slideshow using javascript and css.

I was wondering what do people consider the best way to preload the
images to be used within the show.

I saw a technique where the images were stored in 1 px by 1px divs
with overflow set to hidden.
That technique is not dependent on javascript to load the images and
is appropriate for circustances where that is required. It is not
appropriate for other cases (see below).
I am sure there are other methods as well. I know in years gone by I
used to see the images stored in an array (javascript).

Any suggestions?
It depends. If the images will only be shown using script, it seems
reasonable to load them using script. If scripting is not available,
then the images won't be loaded and the user won't have wasted
bandwidth downloading them.

On the other hand, if you have a fall-back mechanism and want the
images loaded regardless of whether scripting is available or not, use
the suggested div method to ensure that they are loaded and cached by
the browser.

But don't get carried away pre-loading a swag of images that the user
may never want to view whether they have scripting available or not.
--
Rob

Nov 7 '07 #3
Terry wrote:
I was wondering what do people consider the best way to preload the
images to be used within the show.
Just use Image object in JavaScript and store loaded images in Array, this
will do the trick.
I saw a technique where the images were stored in 1 px by 1px divs
with overflow set to hidden.
Nonsense :)

--
# Regards || piotr[.]solnica[at]gmail[.]com || jid : s0****@jabster.pl #
# s0lnic || http://blog.solnic.in5.pl || icq : 385935391 #
Nov 7 '07 #4
rf

"Terry" <wd*@rogers.comwrote in message
news:11**********************@v29g2000prd.googlegr oups.com...
Hi folks.

I am about to embark on creating a slideshow using javascript and css.

I was wondering what do people consider the best way to preload the
images to be used within the show.
How many images?

Why do you want to download them? To save on transition time between
"slides"?

Don't forget that by preloading them you are lumping every transition time
into the load time of the home page (unless you pull some tricky javascript
skulduggery). That is, if you have 100 images in your show and each takes
two seconds to download then your home page will then take 200 seconds to
appear (or maybe 100). Is this what you really want? Dial up users will be
long gone.

And what if I only want to look at a few images? You are forcing me to
download the entire 5 megabytes of your slide show.

--
Richard.
Nov 7 '07 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

22
by: Fabian | last post by:
var preload1 = new Image(); preload1.src = "/pic/yay.gif"; var preload2 = new Image(); preload2.src = "/pic/nay.gif"; The above is meant to preload image files, yes? Problem is, it doesnt seem...
2
by: Julie | last post by:
Hi, I'm trying to change images on a website without reloading the whole page and use the following code to preload the images: var preloadFlag = false; function preloadImages() { if...
6
by: michaaal | last post by:
Is this the correct way to preload an image...? Var Image1 = new Image() ....And then when I'm ready to use the image I can do this...? Button1.src=Image1.src ....Or am I just telling...
4
by: Dennis Allen | last post by:
Hi. I have one image that has to show up in a html page several times. To save time, I'd like to preload this image. As an example: if (document.images) { tester = new Image()...
2
by: windandwaves | last post by:
Hi Gurus Preloading images has got to be JS 101. However, it does not seem to be working. Here is the function that I am using. I added the alerts to make sure it is working and all the right...
40
by: Geoff Cox | last post by:
Hello, I am still having problems - apologies if the answer is in previous postings! I now have, in the header, <sctipt> var myimages=new Array();
2
by: sachaburnett | last post by:
Hi everyone! I'm new to Javascript and am finding so much useful information on this group, so thanks to you all! I have a question about preloading images for onmouseover/out effects and...
7
by: Inny | last post by:
Hello again, Im using the code below in a child page (popup), the images are called from the parent page. When the changer is running, the child page goes white between images. I realise this is...
7
by: Keith Hughitt | last post by:
Hi all, I am having trouble preloading images in a javascript application, and was wondering if anyone had any suggestions. Basically I have a bunch of images stored in a database as BLOBs. At...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.