Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Preload images

Reply
Thread Tools

Preload images

 
 
CK
Guest
Posts: n/a
 
      04-03-2008
Hello everyone,

I am using an image browser to select images for a website.
Basically, it is a table showing the file name and the size, when you
move the mouse over one image, then it gets displayed in the lower
right corner.
The image browser works, has done so since ages, but I noticed
something which would explain the partly sluggish behaviour. When
using Firefox, I see one request per image and its all good, both in
the Firebug extention and in the access log of the Apache webserver
behind.
IE 6 also requests all the images, but then for each mouseover
requests the image again.

Well, it does not. Then I googled around for a bit and found a
gazillion hints, most of which said "have a function in the onload
Event-Handler and it will work".
So I wrote a quick and dirty function which simply requests the
images onLoad, figuring that might help.

It does not. So, is this really an IE 6 issue or is there something I
can do about this to make it work?
--
Claus Dragon <(E-Mail Removed)>
=(UDIC)=
d++ e++ T--
K1!2!3!456!7!S a29
"Coffee is a mocker. So, I am going to mock."

- Me, lately.
 
Reply With Quote
 
 
 
 
Erwin Moller
Guest
Posts: n/a
 
      04-04-2008
CK schreef:
> Hello everyone,
>
> I am using an image browser to select images for a website.
> Basically, it is a table showing the file name and the size, when you
> move the mouse over one image, then it gets displayed in the lower
> right corner.
> The image browser works, has done so since ages, but I noticed
> something which would explain the partly sluggish behaviour. When
> using Firefox, I see one request per image and its all good, both in
> the Firebug extention and in the access log of the Apache webserver
> behind.
> IE 6 also requests all the images, but then for each mouseover
> requests the image again.
>
> Well, it does not. Then I googled around for a bit and found a
> gazillion hints, most of which said "have a function in the onload
> Event-Handler and it will work".
> So I wrote a quick and dirty function which simply requests the
> images onLoad, figuring that might help.
>
> It does not. So, is this really an IE 6 issue or is there something I
> can do about this to make it work?
> --
> Claus Dragon <(E-Mail Removed)>
> =(UDIC)=
> d++ e++ T--
> K1!2!3!456!7!S a29
> "Coffee is a mocker. So, I am going to mock."
>
> - Me, lately.


Hi,

Could you show us your code for preloading, and for displaying?

Regards,
Erwin Moller
 
Reply With Quote
 
 
 
 
SAM
Guest
Posts: n/a
 
      04-04-2008
CK a écrit :
> Hello everyone,
>
> I am using an image browser to select images for a website.
> Basically, it is a table showing the file name and the size, when you
> move the mouse over one image, then it gets displayed in the lower
> right corner.


Is it something like :

<p id="smallImgs">
<img src="photo_1.jpg" onmouseover"viewer.src=this.src" alt="">
<img src="photo_2.jpg" onmouseover"viewer.src=this.src" alt="">
<img src="photo_2.jpg" onmouseover"viewer.src=this.src" alt="">
</p>
<img name="viewer" src="empty.gif" alt=="">

Or do you use thumbnalis and associated big images ?

> IE 6 also requests all the images, but then for each mouseover
> requests the image again.


Idea for a gallery of images :

<script type="text/javascript">

var P = ['dod','cat','cow'], // array of images to display later
fold = 'album_1/', // folder of images
k = 0,
I = [] ;
function cacheImg() { // put in cache paths of images
if(k<P.length) {
var F = true;
I[k] = new Image();
// if possible force the image in the cache
if('object' != typeof I[k].onload) { F=!F; I[k].onload = cacheImg; }
I[k].src = fold + P[k] + '.jpg';
k++
if(F) cacheImg();
}
else reveal();
}
function reveal() {
document.getElementById('wait').style.display='non e';
document.getElementById('album').style.display='bl ock';
}
function browse(num) {
document.images['viewer'].src = I[num].src;
}

window.onload = cacheImg;

</script>
</head>
<body>
<p id="wait">Please wait images loading <img src="wait.gif" alt=""></p>
<p style="display:none" id="album">
<a href="javascript:browse(0)">view 1</a>
<a href="javascript:browse(1)">view 2</a>
<a href="javascript:browse(2)">view 3</a>
</p>
<img name="viewer" src="vide.gif" alt="">



--
sm
 
Reply With Quote
 
Snorik
Guest
Posts: n/a
 
      04-04-2008
Hello,

sure, here is the Javascript code:

var freeze = 0;
function datacapture_get_content()
{
var data = '';
var calloutForm =
eval(window.opener.top.getDCFrame(window.opener).f ormframe.document.dcreditForm);
if (!calloutForm)
{
alert('Fatal callout error. Did you close the datacapture
window?');
}
var calloutElementFound = false;
for ( i = 0 ; i < calloutForm.elements.length ; i++ )
{
if (calloutForm.elements[i].name == 'catalog_update_content/
catalog_thumbnail_FBA')
{
data = calloutForm.elements[i].value ;
calloutElementFound = true ;
break;
}
}
return data;
}

function datacapture_callback( data )
{
var calloutForm =
eval(window.opener.top.getDCFrame(window.opener).f ormframe.document.dcreditForm);
if (!calloutForm)
{
alert('Fatal callout error. Did you close the datacapture
window?');
}
var calloutElementFound = false;
for ( i = 0 ; i < calloutForm.elements.length ; i++ )
{
if (calloutForm.elements[i].name == 'catalog_update_content/
catalog_thumbnail_FBA')
{
calloutForm.elements[i].value = data ;
calloutElementFound = true ;
break;
}
}
if(opener.top.datacapture) {
opener.top.datacapture.refreshForm();
}
self.close();
}

function set_content()
{
var fba = document.form.fba.value;
if (!fba)
{
alert('Please select one file');
}
else
{
datacapture_callback(fba);
}

}
function set_dir( data )
{
freeze = 1 ;
document.form.dir.value = data;
document.form.files_view.value = '0';
document.form.submit();

}
function set_file( value, data )
{
document.forms[0].fba.value = value;
if (freeze == 0)
{
freeze = 1 ;
}
else
{
freeze = 0 ;
document.images['imageboard'].src = ts_image[data].src;
document.images['imageboard'].width = ts_image[data].width;
document.images['imageboard'].height = ts_image[data].height;
document.forms[0].name.value = ts_image[data].name;
document.forms[0].size.value = ts_image[data].size;
}
}

function show_image( data ) {
if (freeze == 0) {
document.images['imageboard'].src = ts_image[data].src;
document.images['imageboard'].width = ts_image[data].width;
document.images['imageboard'].height = ts_image[data].height;
document.forms[0].name.value = ts_image[data].name;
document.forms[0].size.value = ts_image[data].size;
}
}

function show_no_image(data) {
if (freeze == 0) {
document.images['imageboard'].src = '/iw/images/c.gif';
document.images['imageboard'].width = '';
document.images['imageboard'].height = '';
document.forms[0].name.value = ts_image[data].name;
document.forms[0].size.value = ts_image[data].size;
}
}

function set_view( data )
{
document.form.view.value = data;
document.form.dir.value = '';
document.form.files_view.value = '0';
document.form.submit();

}
function set_file_view( data )
{
document.form.files_view.value = data;
document.form.submit();
}

ts_image = new Array( 13 );
ts_image[12] = new Image(300,199);
ts_image[12].src = '/images_path/image1.jpg';
ts_image[12].width = '300';
ts_image[12].height = '199';
ts_image[12].name = 'filename : image1.jpg';
ts_image[12].size = 'filesize : 612 x 406';
ts_image[10] = new Image(102,72);
ts_image[10].src = '/images_path/image2.jpg';
ts_image[10].width = '102';
ts_image[10].height = '72';
ts_image[10].name = 'filename : image2.jpg';
ts_image[10].size = 'filesize : 102 x 72';

// removed additional entries, I think you get the picture


// basically redundant function for the body tag onLoad event trigger,
to try out whether that helps with IE 6
//it does not really help. Yes, I know, it simply doubles the
requests, as the images are already loaded, at least for FireFox.
function loadImages(){
images = new Array( 13 );
images[12] = '/images_path/image1.jpg';
images[10] = '/images_path/image2.jpg';
//again, additional values removed
}

<!-- here is the code in the body -->

<body onload="loadImages()">
<!-- [...] -->

<!-- the actual table: -->

<table class="heading" height="25" border="0" width="100%">
<tr>
<td class="heading-title">Image browser</td>
<td class="heading-user" align="right">user:&nbsp <i>user</i></td>
</tr>
</table>
<form method="get" id="form" name="form">
<div style="width:600px; height:22px; border:1px solid #840; border-
bottom: 0px; background-color: #eeeeee; margin-left:1em; margin-top:
0.8em;">
&nbsp;
<font color='#666666' style='font-size:11px'>local:&nbsp;</font>
<!-- woops, here is a table start missing -->
<tr style='background-color: #ddeeff;' >
<td align='left' width='5px'>
<img src="/file_images/img_file.gif" alt="dir" height="15"
border="0" />
</td>
<td>
<a href='javascript:set_file("/images_path/image1.jpg", "0");'
onDbClick='set_content();' onmouseover='show_image( 0 );'>
image1.jpg
</a>
</td>
<td style='font-size: 11px;'>
(277 x 184)
</td>
<td style=' font-size: 11px;'>
15 kb
</td>
</tr>

<!-- and so on ... -->

I have removed some of the values in order not to have a boring list
of array entries.
Is there anything in there which could possibly make IE not use the
cached images?

Thanks for your time,

Claus

 
Reply With Quote
 
Snorik
Guest
Posts: n/a
 
      04-04-2008
On 4 Apr., 10:16, SAM <(E-Mail Removed)>
wrote:
> CK a écrit :
>
> > Hello everyone,

>
> > I am using an image browser to select images for a website.
> > Basically, it is a table showing the file name and the size, when you
> > move the mouse over one image, then it gets displayed in the lower
> > right corner.

>
> Is it something like :
>
> <p id="smallImgs">
> <img src="photo_1.jpg" onmouseover"viewer.src=this.src" alt="">
> <img src="photo_2.jpg" onmouseover"viewer.src=this.src" alt="">
> <img src="photo_2.jpg" onmouseover"viewer.src=this.src" alt="">
> </p>
> <img name="viewer" src="empty.gif" alt=="">
>
> Or do you use thumbnalis and associated big images ?


Perl::ImageMagick creates thumbnails to fit into the image area.


> Idea for a gallery of images :
>
> <script type="text/javascript">
>
> var P = ['dod','cat','cow'], // array of images to display later
> fold = 'album_1/', // folder of images
> k = 0,
> I = [] ;
> function cacheImg() { // put in cache paths of images
> if(k<P.length) {
> var F = true;
> I[k] = new Image();
> // if possible force the image in the cache
> if('object' != typeof I[k].onload) { F=!F; I[k].onload = cacheImg; }
> I[k].src = fold + P[k] + '.jpg';
> k++
> if(F) cacheImg();
> }
> else reveal();}


How does this work? If the image in question is not in the cache
array, then load the object on load by the function? I already use an
array to store the images, two in fact (one being redundant, see other
post).

Regards,
Claus
 
Reply With Quote
 
SAM
Guest
Posts: n/a
 
      04-04-2008
Snorik a écrit :
> On 4 Apr., 10:16, SAM <(E-Mail Removed)>
> wrote:
>
>> Idea for a gallery of images :
>>
>> <script type="text/javascript">
>>
>> var P = ['dod','cat','cow'], // array of images to display later
>> fold = 'album_1/', // folder of images
>> k = 0,
>> I = [] ;
>> function cacheImg() { // put in cache paths of images
>> if(k<P.length) {
>> var F = true;
>> I[k] = new Image();
>> // if possible force the image in the cache
>> if('object' != typeof I[k].onload) { F=!F; I[k].onload = cacheImg; }
>> I[k].src = fold + P[k] + '.jpg';
>> k++
>> if(F) cacheImg();
>> }
>> else reveal();}

>
> How does this work? If the image in question is not in the cache


doing a JS in the head like

var a = new Image(); a.src='img_1.jpg';
var b = new Image(); b.src='img_2.jpg';

both images are supposed to be sent in the cache


If they are not yet
(because you dind't leave time to time or any other reason),
no importance.
Calling the image by its JS src will load the right image,
a.src being only the path to the image (on server).

But, on next call of a.src,
this time we surely get the image from cache.

--
sm
 
Reply With Quote
 
Henry
Guest
Posts: n/a
 
      04-04-2008
On Apr 4, 1:21 pm, SAM wrote:
<snip>
> doing a JS in the head like
>
> var a = new Image(); a.src='img_1.jpg';
> var b = new Image(); b.src='img_2.jpg';
>
> both images are supposed to be sent in the cache


Says who?

> If they are not yet
> (because you dind't leave time to time or any other reason),
> no importance.
> Calling the image by its JS src will load the right image,
> a.src being only the path to the image (on server).
>
> But, on next call of a.src,


You are disregarding the influence of HTTP caching (and caching
influencing) headers and browser configuration. If the browser is
configured to re-retrieved for each request that is what it will do,
and if the HTTP headers assert that the image is not to be cached the
odds are good that it will not be, and if they assert that any
previously cached resource has expired it should be re-retrieved
regardless of whether it is in the cache or not.
 
Reply With Quote
 
SAM
Guest
Posts: n/a
 
      04-04-2008
Henry a écrit :
> On Apr 4, 1:21 pm, SAM wrote:
> <snip>
>> doing a JS in the head like
>>
>> var a = new Image(); a.src='img_1.jpg';
>> var b = new Image(); b.src='img_2.jpg';
>>
>> both images are supposed to be sent in the cache

>
> Says who?


Not me.
(Rarely I've seen that really working on 1srt pass)

>> If they are not yet
>> (because you dind't leave time to time or any other reason),
>> no importance.
>> Calling the image by its JS src will load the right image,
>> a.src being only the path to the image (on server).
>>
>> But, on next call of a.src,

>
> You are disregarding the influence of HTTP caching


Yes, absolutely, and it's a good remark.
I hope all is OK to do what this JS is supposed to do.

I can't fix all the configurations from my chair


--
sm
 
Reply With Quote
 
Snorik
Guest
Posts: n/a
 
      04-04-2008
On 4 Apr., 14:21, SAM <(E-Mail Removed)>
wrote:
> Snorik a écrit :
>
>
>
> > On 4 Apr., 10:16, SAM <(E-Mail Removed)>
> > wrote:

>
> >> Idea for a gallery of images :

>
> >> <script type="text/javascript">

>
> >> var P = ['dod','cat','cow'], // array of images to display later
> >> fold = 'album_1/', // folder of images
> >> k = 0,
> >> I = [] ;
> >> function cacheImg() { // put in cache paths of images
> >> if(k<P.length) {
> >> var F = true;
> >> I[k] = new Image();
> >> // if possible force the image in the cache
> >> if('object' != typeof I[k].onload) { F=!F; I[k].onload = cacheImg; }
> >> I[k].src = fold + P[k] + '.jpg';
> >> k++
> >> if(F) cacheImg();
> >> }
> >> else reveal();}

>
> > How does this work? If the image in question is not in the cache

>
> doing a JS in the head like
>
> var a = new Image(); a.src='img_1.jpg';
> var b = new Image(); b.src='img_2.jpg';
>
> both images are supposed to be sent in the cache


Ok, but am I not doing that already via the array(s)?

> If they are not yet
> (because you dind't leave time to time or any other reason),
> no importance.
> Calling the image by its JS src will load the right image,
> a.src being only the path to the image (on server).


OK.

 
Reply With Quote
 
Snorik
Guest
Posts: n/a
 
      04-04-2008
On 4 Apr., 14:46, Henry <(E-Mail Removed)> wrote:

> You are disregarding the influence of HTTP caching (and caching
> influencing) headers and browser configuration. If the browser is
> configured to re-retrieved for each request that is what it will do,
> and if the HTTP headers assert that the image is not to be cached the
> odds are good that it will not be, and if they assert that any
> previously cached resource has expired it should be re-retrieved
> regardless of whether it is in the cache or not.


Silly question but where do I see that? Live HTTP headers does not
show any expiry-date, at least none I can recognize...
Also, where in that trice-%&§! IE can I toggle that?
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Preload images returned by an HttpHandler =?Utf-8?B?Q2FzcGE=?= ASP .Net 2 03-28-2007 12:36 AM
Preload Images in Asp.Net 2.0. How can I do this? shapper ASP .Net 4 11-25-2006 06:16 PM
preload images from sql server ks ASP .Net 1 08-05-2006 07:13 AM
Preload TreeView images Mark ASP .Net Web Controls 2 02-14-2004 11:15 AM
preload images Morris HTML 5 11-14-2003 02:19 AM



Advertisments