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();
function preloadimages() ;
{
for (i=0;i<preloadi mages.arguments .length;i++)
{
myimages[i]=new Image();
myimages[i].src=preloadima ges.arguments[i];
}
}
</script>
and
<body
onload="preload images('before-and-after.gif','pic 1.jpg','pic2.jp g',
'pic3.jpg','pic 4.jpg','pic5.jp g','pic6.jpg',' pic7.jpg')">
The above is in the first page where only the first image above, the
before-and-after.gif image, is displayed.
The rest are displayed in the second page linked to the first and are
shown by using an array
var picture = new Array(7);
picture[0] = "pic1.jpg";
picture[1] = "pic2.jpg";
picture[2] = "pic3.jpg";
picture[3] = "pic4.jpg";
picture[4] = "pic5.jpg";
picture[5] = "pic6.jpg";
picture[6] = "pic7.jpg";
and then displayed using typical code as follows
document.getEle mentById('pictu re').innerHTML
= "<img src=" + window["picture"][situation_numbe r] + ">";
I am finding that the first 3 jpg images are displayed quickly in the
second page (presumably from the IE v6 cache), but the others 4 are
only downloaded when the second page gets to the point where they are
to be displayed.
Am I wrong somewhere? Where can I look to see which images, if any,
have been preloaded into the browser cache? The use of the picture
array is possibly wrong or redundant??
Cheers
Geoff 40  2784 
Hi Geoff,
Geoff Cox wrote: 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();
function preloadimages() ;
{
for (i=0;i<preloadi mages.arguments .length;i++)
{
myimages[i]=new Image();
myimages[i].src=preloadima ges.arguments[i];
}
}
</script>
and
<body
onload="preload images('before-and-after.gif','pic 1.jpg','pic2.jp g',
'pic3.jpg','pic 4.jpg','pic5.jp g','pic6.jpg',' pic7.jpg')">
To me, this method is redundant. The whole purpose is to *preload* the
images, not to grab the images once the page has loaded.
The above is in the first page where only the first image above, the
before-and-after.gif image, is displayed.
The rest are displayed in the second page linked to the first and are
shown by using an array
var picture = new Array(7);
picture[0] = "pic1.jpg";
picture[1] = "pic2.jpg";
picture[2] = "pic3.jpg";
picture[3] = "pic4.jpg";
picture[4] = "pic5.jpg";
picture[5] = "pic6.jpg";
picture[6] = "pic7.jpg";
and then displayed using typical code as follows
document.getEle mentById('pictu re').innerHTML
= "<img src=" + window["picture"][situation_numbe r] + ">";
I am finding that the first 3 jpg images are displayed quickly in the
second page (presumably from the IE v6 cache), but the others 4 are
only downloaded when the second page gets to the point where they are
to be displayed.
Am I wrong somewhere? Where can I look to see which images, if any,
have been preloaded into the browser cache? The use of the picture
array is possibly wrong or redundant??
Cheers
Geoff
Try not to use the onload event to preload your images. Instead you
might want to try it this way:
<script type = "type/javascript">
//place this in between the HEAD tag
//preload images
var myImages = new Array();
var n_images = 7;
//if you know the number of images to preload
for(var i = 0; i < n_images; ++i)
{
myImages[i] = new Image();
//only useful if your pictures have a common name
myImages[i].src = "path/pic" + i + ".jpg";
}
function displayImages()
{
var imgStr = "";
for(var i = 0; i < n_images; ++i)
{
imgStr += "<img src ='" + myImages[i].src + "/>";
}
document.getEle mentById("pictu re").innerHTM L = imgStr;
}
window.onload = displayImages;
</script>
And in the body of your html, you should ensure you have an element
with the id "picture".
For example:
<body>
....
<div id = "picture"></div>
....
</body>
On 14 Sep 2005 11:12:41 -0700, "web.dev" <we********@gma il.com> wrote: <body
onload="preload images('before-and-after.gif','pic 1.jpg','pic2.jp g',
'pic3.jpg','pic 4.jpg','pic5.jp g','pic6.jpg',' pic7.jpg')">
To me, this method is redundant. The whole purpose is to *preload* the
images, not to grab the images once the page has loaded.
Hello,
I thought the above was pre-loading!! What is it doing?
Try not to use the onload event to preload your images. Instead you
might want to try it this way:
I would certainly like to try your suggestions but when you write that
I should have
<div id = "picture"></div>
this might be difficult? What happens is that the page starts with a
table in the <body> area, and then a cell is populated with the
question text and an image for a particular "situation" , using
Javascript. When the question has been answered the next situation
image and question go into the table etc etc using the following
method ..
document.getEle mentById('pictu re').innerHTML
= "<img src=" + window["picture"][situation_numbe r] + ">";
Will you code work in this way?
Cheers
Geoff
<script type = "type/javascript">
//place this in between the HEAD tag
//preload images
var myImages = new Array();
var n_images = 7;
//if you know the number of images to preload
for(var i = 0; i < n_images; ++i)
{
myImages[i] = new Image();
//only useful if your pictures have a common name
myImages[i].src = "path/pic" + i + ".jpg";
}
function displayImages()
{
var imgStr = "";
for(var i = 0; i < n_images; ++i)
{
imgStr += "<img src ='" + myImages[i].src + "/>";
}
document.getEle mentById("pictu re").innerHTM L = imgStr;
}
window.onloa d = displayImages;
</script>
And in the body of your html, you should ensure you have an element
with the id "picture".
For example:
<body>
...
<div id = "picture"></div>
...
</body>
"Geoff Cox" <ge*******@notq uitecorrectfree uk.com> wrote in message
news:64******** *************** *********@4ax.c om... On 14 Sep 2005 11:12:41 -0700, "web.dev" <we********@gma il.com> wrote:
<body
onload="preload images('before-and-after.gif','pic 1.jpg','pic2.jp g',
'pic3.jpg','pic 4.jpg','pic5.jp g','pic6.jpg',' pic7.jpg')">
To me, this method is redundant. The whole purpose is to *preload* the
images, not to grab the images once the page has loaded.
Hello,
I thought the above was pre-loading!! What is it doing?
the onload event triggers once the page has been loaded.
Try not to use the onload event to preload your images. Instead you
might want to try it this way:
I would certainly like to try your suggestions but when you write that
I should have
<div id = "picture"></div>
this might be difficult? What happens is that the page starts with a
table in the <body> area, and then a cell is populated with the
question text and an image for a particular "situation" , using
Javascript. When the question has been answered the next situation
image and question go into the table etc etc using the following
method ..
no problem just ammend your javascript which writes out the question to also
write out the div. document.getEle mentById('pictu re').innerHTML
= "<img src=" + window["picture"][situation_numbe r] + ">";
Will you code work in this way?
Yes.
On Wed, 14 Sep 2005 18:31:59 GMT, "Zoe Brown"
<zo***********@ N-O-S-P-A-A-Mtesco.net> wrote: no problem just ammend your javascript which writes out the question to also
write out the div. document.getEle mentById('pictu re').innerHTML
= "<img src=" + window["picture"][situation_numbe r] + ">";
Zoe,
When you say "write out the div" - the above code for changing the
image depends on the ID of the <td> tag, ei
<td ID='picture' valign='top'></td>
Not clear how your ref to a div filts in here?
Cheers
Geoff
"Geoff Cox" <ge*******@notq uitecorrectfree uk.com> wrote in message
news:cg******** *************** *********@4ax.c om... On Wed, 14 Sep 2005 18:31:59 GMT, "Zoe Brown"
<zo***********@ N-O-S-P-A-A-Mtesco.net> wrote:
no problem just ammend your javascript which writes out the question to
also
write out the div.
document.getEle mentById('pictu re').innerHTML
= "<img src=" + window["picture"][situation_numbe r] + ">";
Zoe,
When you say "write out the div" - the above code for changing the
image depends on the ID of the <td> tag, ei
<td ID='picture' valign='top'></td>
Not clear how your ref to a div filts in here?
Cheers
Geoff
post your code if that is ok. What I am saying is that the div doesnt
matter if you are changing content dynamically cos you can just reference
the image dynamically but it is hard when I dont know what you are trying to
do exactly.
On 14 Sep 2005 11:12:41 -0700, "web.dev" <we********@gma il.com> wrote:
Web dev
I have your code working but just another thought.
Is it possible to use Javascipt to put up a message saying "please
wait while images are downloaded" ? Or, make the questions and slider
appear after the images have been downlloaded?
The other thought I'd had was to preload the images for the second
page whilst the first page was on the screen but of couse the line
document.getEle mentById("pictu re").innerHTM L = imgStr;
gives an error. Is there a way round this?
Cheers
Geoff
"Geoff Cox" <ge*******@notq uitecorrectfree uk.com> wrote in message
news:g8******** *************** *********@4ax.c om... On 14 Sep 2005 11:12:41 -0700, "web.dev" <we********@gma il.com> wrote:
Web dev
I have your code working but just another thought.
Is it possible to use Javascipt to put up a message saying "please
wait while images are downloaded" ?
Not a good idea will look rubbish.
Or, make the questions and slider
appear after the images have been downlloaded?
Yes you can check th eimage is there first but if you are preloading them
you wont need to do this.
The other thought I'd had was to preload the images for the second
page whilst the first page was on the screen but of couse the line
document.getEle mentById("pictu re").innerHTM L = imgStr;
??? Why do you need this line ? this line is for displaying the image and
shouldnt be called until the image is in place. What page is this line on ?
On Wed, 14 Sep 2005 18:31:59 GMT, "Zoe Brown"
<zo***********@ N-O-S-P-A-A-Mtesco.net> wrote: no problem just ammend your javascript which writes out the question to also
write out the div. document.getEle mentById('pictu re').innerHTML
= "<img src=" + window["picture"][situation_numbe r] + ">";
Will you code work in this way?
Yes.
Zoe,
When I said to web dev that his code was working - afraid I made a
mistake! I still had
var picture = new Array(7);
picture[0] = "pic1.jpg";
picture[1] = "pic2.jpg";
picture[2] = "pic3.jpg";
picture[3] = "pic4.jpg";
picture[4] = "pic5.jpg";
picture[5] = "pic6.jpg";
picture[6] = "pic7.jpg";
in the code so although the images were preloaded my code was using
the above arry names to show the images.
Can you explain how I would alter
document.getEle mentById('pictu re').innerHTML =
"<img src=" + window["picture"][situation_numbe r] + ">";
to use web dev's code?
He has
document.getEle mentById("pictu re").innerHTM L = imgStr;
but I'm not clear what this means. I need the images to be preloaded
but they are only displayed 1 at a time as the user progresses through
the app....
Cheers
Geoff
"Geoff Cox" <ge*******@notq uitecorrectfree uk.com> wrote in message
news:oj******** *************** *********@4ax.c om... On Wed, 14 Sep 2005 18:31:59 GMT, "Zoe Brown"
<zo***********@ N-O-S-P-A-A-Mtesco.net> wrote:
no problem just ammend your javascript which writes out the question to
also
write out the div.
document.getEle mentById('pictu re').innerHTML
= "<img src=" + window["picture"][situation_numbe r] + ">";
Will you code work in this way?
Yes.
Zoe,
When I said to web dev that his code was working - afraid I made a
mistake! I still had
var picture = new Array(7);
picture[0] = "pic1.jpg";
picture[1] = "pic2.jpg";
picture[2] = "pic3.jpg";
picture[3] = "pic4.jpg";
picture[4] = "pic5.jpg";
picture[5] = "pic6.jpg";
picture[6] = "pic7.jpg";
in the code so although the images were preloaded my code was using
the above arry names to show the images.
Can you explain how I would alter
document.getEle mentById('pictu re').innerHTML =
"<img src=" + window["picture"][situation_numbe r] + ">";
to use web dev's code?
He has
document.getEle mentById("pictu re").innerHTM L = imgStr;
You would use something like this
document.getEle mentById('pictu re').innerHTML =
"<img src=" + imgStr + ">";
But without seeing all your code I can't see that it will work. If you have
just copied code you have been given by web dev then it is not likely to
work without a few changes. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
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?
--
--
|
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");
|
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?
|
by: Stevio |
last post by:
In my web page I preload images so that when a user clicks on a part of the
image, the image changes.
The images are used to display 4 tabs. Each image shows a different tab as
highlighted. If a user clicks on the 2nd tab, the image changes so that the
2nd tab is highlighted a different colour, and so on.
The image for the 1st tab is...
|
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...
| | |
by: giladg22 |
last post by:
Hi All,
I need some help resolving a pretty tricky problem. I have a javascript
application running from a CD. The script preloads between 500 to 1000
jpegs (about 40K each) to the IE. The IE immediatly decompresses the
jpegs, essentially using up too much memory.
I have a few limitations working against me:
A) Since the jpegs reside on...
|
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:
|
by: littleark |
last post by:
Hi everybody,
I have a typical javascript images preloader, it works fine both on
Firefox and on IE in my intranet (local server).
It works fine on the Internet (remote server) in IE.
In Firefox it stops before loading every image.
Does image.onload function have some problems with little images?
|
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...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
|
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...
| | |
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...
|
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...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes...
|
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...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| | |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
