By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,253 Members | 1,652 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,253 IT Pros & Developers. It's quick & easy.

Hey, I can't get all images pre-loaded in frames

P: n/a
Hi, I've been buried in this project, which has a lot of pre-loaded
images. The pages which have these images are frames.... and even with
my best attempts to preload them all still most do not. Some use more
than one image and the flicker is obvious.

Below is how I am loading them, and it doesn't matter if I use URL
referenced images or locally, (i.e. ./image1.gif)

<script>
pic1= new Image;
pic1.src="./image1.gif";
pic2= new Image;
pic2.src="http://www....";
</script>

Is there a reliable way to pre-load all images in frames, or *should*
this work and it's something else? :)

Sincerely, AmyMC

Nov 28 '06 #1
Share this Question
Share on Google+
10 Replies


P: n/a
VK
Hi, I've been buried in this project, which has a lot of pre-loaded
images.
<snip>
Below is how I am loading them, and it doesn't matter if I use URL
referenced images or locally, (i.e. ./image1.gif)
Not "locally" but "using relative path" as opposed to "using absolute
path" ;-)
pic1= new Image;
pic1.src="./image1.gif";
pic2= new Image;
pic2.src="http://www....";
</script>
imageObject.src = url is not some magic way to immediately transfer
image from the server into cache, it only places a request for caching.
If your frameset contains really a lot of images then they can be
simply not cached all yet by the moment you start mousing around.
Is there a reliable way to pre-load all images in frames, or *should*
this work and it's something else? :)
In Netscape 3 (where Image / ImageObject.src was introduced) it was
used to pre-cache images and it worked that way just fine. Since then
the "public expectation" is that it will work as on Netscape 3 and
mostly it is this way. From the other side I do not recall any blood
written commitments from browser producers to cache "virtual" images
(declared in the script but not presented on the page).

Nov 29 '06 #2

P: n/a
ASM
AmyMC a écrit :
Hi, I've been buried in this project, which has a lot of pre-loaded
images. The pages which have these images are frames.... and even with
my best attempts to preload them all still most do not. Some use more
than one image and the flicker is obvious.

Below is how I am loading them, and it doesn't matter if I use URL
referenced images or locally, (i.e. ./image1.gif)

<script>
pic1= new Image;
pic1.src="./image1.gif";
pic2= new Image;
pic2.src="http://www....";
that doesn't preload images in cache
they are only a kind of short-cuts to find images.

Once they have beendisplayed, this time they are in cache and it is then
possible to call them from the cache using short-cut picN.src

To post-load images :

var imgs = ['/image1.gif','http://www...'];
var n = imgs.length;
var P = new Array;
function postload() {
if(n==imgs.length) displayPicts();
else {
P[n] = new Image();
P[n].onload = postload;
P[n].src = imgs[n];
n++;
}
}
onload = postload;

function displayPicts() {
for(var i=0; i<document.images.length; i++)
if(document.images['img_'+i])
document.images['img_'+i].src = P[i];
}
</script>

Is there a reliable way to pre-load all images in frames, or *should*
this work and it's something else? :)
Where is the JS preloading images ?

Say it is in frame A and images to display are in A : OK

Say it's in main page :
from frames you would have to call them with : parent.P[x].src
--
Stephane Moriaux et son moins vieux Mac déjà dépassé
Stephane Moriaux and his less old Mac already out of date
Nov 29 '06 #3

P: n/a
Nice. Can you use this on a single page to more reliably load images?
How would that work on a single page? Could you please show a working
example?

Nov 29 '06 #4

P: n/a
To post-load images :

var imgs = ['/image1.gif','http://www...'];
var n = imgs.length;
var P = new Array;
function postload() {
if(n==imgs.length) displayPicts();
else {
P[n] = new Image();
P[n].onload = postload;
P[n].src = imgs[n];
n++;
}
}
onload = postload;

function displayPicts() {
for(var i=0; i<document.images.length; i++)
if(document.images['img_'+i])
document.images['img_'+i].src = P[i];
}
POST LOAD IMAGES? WHAT THE HECK IS THAT?......

Nov 30 '06 #5

P: n/a
ASM
pi********@gmail.com a écrit :
>
POST LOAD IMAGES? WHAT THE HECK IS THAT?......
example :
<http://stephane.moriaux.perso.wanadoo.fr/truc/post_load_movy.shtml>

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Nov 30 '06 #6

P: n/a

ASM wrote:
pi********@gmail.com a écrit :

POST LOAD IMAGES? WHAT THE HECK IS THAT?......

example :
<http://stephane.moriaux.perso.wanadoo.fr/truc/post_load_movy.shtml>
COOL :)), can you get this working in IE7.0? The loading 0/20 doesn't
work and the START/STOP button doesn't appear, but can't tell otherwise
if your demo works :(

Nov 30 '06 #7

P: n/a
ASM
pi********@gmail.com a écrit :
ASM wrote:
>pi********@gmail.com a écrit :
>>POST LOAD IMAGES? WHAT THE HECK IS THAT?......
example :
<http://stephane.moriaux.perso.wanadoo.fr/truc/post_load_movy.shtml>

COOL :)), can you get this working in IE7.0?
I'ven't IE at all.
Please could you make it working ?
The loading 0/20 doesn't
work
Except in Safari (fixed) it worked in all my browsers.
and the START/STOP button doesn't appear,
This time I don't more use usual css It'ld have to run.
but can't tell otherwise
if your demo works :(
See this time

--
Stephane Moriaux et son moins vieux Mac déjà dépassé
Stephane Moriaux and his less old Mac already out of date
Nov 30 '06 #8

P: n/a
I'ven't IE at all.
Please could you make it working ?
The loading 0/20 doesn't
work
I WILL WORK ON THIS TASK AND POST MY RESULTS

Dec 1 '06 #9

P: n/a
ASM
pi********@gmail.com a écrit :
>I'ven't IE at all.
Please could you make it working ?
>>The loading 0/20 doesn't
work

I WILL WORK ON THIS TASK AND POST MY RESULTS
I think that now it is OK :
<http://stephane.moriaux.perso.wanadoo.fr/truc/post_load_movy.shtml>
it works with each of my browsers.
var imgs = ['/image1.gif','http://www...'];
var n = 0;
var P = new Array;
function postload() {
if(n==imgs.length) displayPicts();
else {
P[n] = new Image();
P[n].onload = function() { n++; postload(); }
P[n].src = imgs[n];
}
}
onload = postload;

function displayPicts() {
for(var i=0; i<document.images.length; i++)
if(document.images['img_'+i])
document.images['img_'+i].src = P[i].src;
}
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Dec 1 '06 #10

P: n/a
:) i like this concept, but could you show this working? i put two
google images in there, but unclear if anything is going on. am i
running this correctly to post-load those two? :)

displayPicts() ?

<script>

var imgs =
['http://www.google.com/intl/en_ALL/images/logo.gif','http://www.google.com/images/ribbon_aids_day.gif'];
var n = 0;
var P = new Array;
function postload() {
if(n==imgs.length) displayPicts();
else {
P[n] = new Image();
P[n].onload = function() { n++; postload(); }
P[n].src = imgs[n];
}
}

onload = postload;

function displayPicts() {
for(var i=0; i<document.images.length; i++)
if(document.images['img_'+i])
document.images['img_'+i].src = P[i].src;

}

displayPicts();

</script>

have great day thxs!

Dec 1 '06 #11

This discussion thread is closed

Replies have been disabled for this discussion.