...

View Full Version : Preloading pictures



Honza
11-16-2004, 05:27 PM
Hi!
I preload picture with code



function ShowPic(picture){
var tempImg = new Image();
tempImg.src = picture
.....
}

Is there a way how to find when the picture is fully load, e.g. his attributes are accessible.
Thank you.
Honza

Willy Duitt
11-16-2004, 05:35 PM
You can try: tempImg.onload or tempImg.complete

Honza
11-16-2004, 06:22 PM
Both work perfectly for me.
Thank you very much Willy.

Now I also see that there is one danger. Not to wait for eternity, if given picture is not on a server. But it should not be a problem to write a proper code.

Honza

Willy Duitt
11-16-2004, 06:48 PM
Now I also see that there is one danger. Not to wait for eternity, if given picture is not on a server. But it should not be a problem to write a proper code.

tempImg.onerror

Honza
11-16-2004, 07:19 PM
Thanks for tempImg.onerror. And last question, if I can.
tempImg.onload is better for me (at least at 7:16). But it "fires" only once. Can this event be "reseted" to work if the function ShowPic is called repeatedly?
Honza

Willy Duitt
11-16-2004, 07:28 PM
Thanks for tempImg.onerror. And last question, if I can.
tempImg.onload is better for me (at least at 7:16). But it "fires" only once. Can this event be "reseted" to work if the function ShowPic is called repeatedly?
Honza

I've had problems with that before myself.... And I have found that the problem with repeatedly calling the image once the onload was called the first time is caused by the browser caching the image and it believes the image is already loaded so the onload is never called again (switching from image to image cancels this behavior)....

What I have done in the past to work around this problem is to append a querry and number to the image source... This fools the browser into believing a new image is being loaded...

IE: tempImg.src = picture+'?'+new Date().getUTCSeconds();

.....Willy

Willy Duitt
11-16-2004, 07:33 PM
BTW: Here is an example of how I use both the onload and querry appending....
(there's also some postloading and preloading in there but I'm not sure of its effectiveness after I added the querry appending)....



<html>
<head>
<title>:::...P2 PHOTOGRAPHIC...:::</title>
<BASE HREF="http://www.p2photographic.com/fashion/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link src="styles/style.css">
<style type="text/css">
<!--
img { border:none;
}
img.thumbs { margin: 2px;
cursor: pointer;
}
img.popup { width: 319px;
height: 306px;
cursor: pointer;
}
-->
</style>
<script type="text/javascript">
<!--//
function display(image) {
var num = (/\d+(?=\.)/.exec(image.src));
document.images['popup'].src = '/images/midsize/f'+num+'.jpg';
}

function popUp(image){
var num = (/\d+(?=\.)/.exec(image.src));
var pop = new Image();
pop.src = '/images/final/fash'+num+'.jpg?'+new Date().getUTCSeconds();
pop.onerror = function(){ alert('This image has failed to load!') }
pop.onload = function(){
var features = 'top='+Math.round((screen.height - pop.height) / 2)+',';
features += 'left='+Math.round((screen.width - pop.width) / 2)+',';
features += 'width='+pop.width+',';
features += 'height='+pop.height;
var popWindow = window.open('','popup',features);
with(popWindow.document){
writeln('<html><head><title>Fashion Images</title></head>');
writeln('<body onload="self.focus()" onblur="self.close()"');
writeln('style="background-image:url('+pop.src+')">');
writeln('<div style="position:absolute;bottom:3px;text-align:center">');
writeln('<span style="font-size:12px;width:100%">');
writeln('<a href="javascript:self.close()">Close</a>');
writeln('</span></div></body></html>');
close();
}
}
}
//-->
</script>
</head>

<body>

<div style="width:100%;text-align:center">
<table cellpadding="0" cellspacing="0" border="0">

<tr>
<td class="midsize" rowspan="6" width="32">
<img src="/images/photographic.gif"></td>
<td valign="top" width="202">
<img src="/images/thumb_top.gif" style="margin-bottom:4px"><br>
<img src="/images/thumbs/f-thb01.gif" class="thumbs" onclick="display(this)">
<img src="/images/thumbs/f-thb02.gif" class="thumbs" onclick="display(this)">
<img src="/images/thumbs/f-thb03.gif" class="thumbs" onclick="display(this)">
<img src="/images/thumbs/f-thb04.gif" class="thumbs" onclick="display(this)"><br>
<img src="/images/thumbs/f-thb05.gif" class="thumbs" onclick="display(this)">
<img src="/images/thumbs/f-thb06.gif" class="thumbs" onclick="display(this)">
<img src="/images/thumbs/f-thb07.gif" class="thumbs" onclick="display(this)">
<img src="/images/thumbs/f-thb08.gif" class="thumbs" onclick="display(this)"><br>
<img src="/images/thumbs/f-thb09.gif" class="thumbs" onclick="display(this)">
<img src="/images/thumbs/f-thb10.gif" class="thumbs" onclick="display(this)">
<img src="/images/thumbs/f-thb11.gif" class="thumbs" onclick="display(this)">
<img src="/images/thumbs/f-thb12.gif" class="thumbs" onclick="display(this)"><br>
<img src="/images/thumbs/f-thb13.gif" class="thumbs" onclick="display(this)">
<img src="/images/thumbs/f-thb14.gif" class="thumbs" onclick="display(this)">
<img src="/images/thumbs/f-thb15.gif" class="thumbs" onclick="display(this)">
<img src="/images/thumbs/f-thb16.gif" class="thumbs" onclick="display(this)"><br>
<img src="/images/thumbs/f-thb17.gif" class="thumbs" onclick="display(this)">
<img src="/images/thumbs/f-thb18.gif" class="thumbs" onclick="display(this)">
<img src="/images/thumbs/f-thb19.gif" class="thumbs" onclick="display(this)">
<img src="/images/graybox.gif" class="thumbs" onclick="display(this)"><br>
<img src="/images/graybox.gif" class="thumbs" onclick="display(this)">
<img src="/images/graybox.gif" class="thumbs" onclick="display(this)">
<img src="/images/graybox.gif" class="thumbs" onclick="display(this)">
<img src="/images/graybox.gif" class="thumbs" onclick="display(this)"></td>

<td class="midsize" rowspan="6" width="319">
<img src="/images/mid_bott.gif"><br>
<img src="/images/midsize/f01.jpg" name="popup" class="popup" onclick="popUp(this)"><br>
<img src="/images/mid_bott.gif"></td>

</tr>
</table>
</div>
</body>
</html>


.....Willy

Edit: Oooops, this is not the script with the postloading/preloading so ignore those comments...

Honza
11-16-2004, 08:21 PM
I've tried it with a pictures on a server and it works. But now I'm in a doubt if it's good way to give up caching.
Nevertheless you gave me a perfect answer to my question and I thank you for it.
I will probably prefer using tempImg.complete repeatable by means of setTimeout. Must think :mad: about it more.
Honza



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum