473,756 Members | 3,663 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 1489
On Nov 6, 5:56 pm, Terry <w...@rogers.co mwrote:
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.co mwrote:
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.com wrote in message
news:11******** **************@ v29g2000prd.goo glegroups.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
3133
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 to be doing so in practice. Any idea where Im going wrong? Could it be that things work differnetly when in an attached .js file? -- --
2
1900
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 (document.images) { pic_moon2_click = newImage("images/moonpic2.jpg"); pic_moon3_click = newImage("images/moonpic3.jpg");
6
1588
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 Button1 to use the same source path as Image1?
4
1692
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() tester.onload=function() {cImg('good')} tester.onerror=function() {cImg('bad')} tester.src="image.jpg" } function cImg(typ) {
2
1857
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 alerts show up, yet when I do my mouseover, it still takes about a second (only the first time) to load the image (thumbnail). Am I missing anything?
40
2845
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
2984
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 found so many different ways to do it on the Net but am not sure about something. Right now I have the following code inside my <head> tag:
7
2456
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 happening because the Images are not cached (yet) on the users browser. I tried preloading images with the 2nd code below in the childpage head and in the parent page head and both. no joy, dosent seem to actually 'preload' the pics. (i also gave...
7
2000
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 any given point in time a subset of those images is displayed on- screen. At certains times I want to swap out those on screen with new ones from the database, and do some as seamlessly as possible. So what I've tried to do is first create Image...
0
9273
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9872
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9841
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9711
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
6534
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5141
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5303
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3805
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3358
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.