Jump to content

Need to preload images of an ajax file


itpvision

Recommended Posts

Hello

I have a main page containing an ajax file inside

inside the ajax file, small and large images are retrived from a mysql database, the large images are inside a hidden div, onmouseover on the small pic, the hidden frame is visible and the large image appears, there is also a pagination inside the ajax file to show the next 12 images

 

I need to make sure the large images are preloaded, the site is still offline, i am worried that online onmouseover, the largeimage wont appear cause it is not loaded yet

 

I need to make sure the large images are prelaoded

Many Thanks

Link to comment
https://forums.phpfreaks.com/topic/127668-need-to-preload-images-of-an-ajax-file/
Share on other sites

aloha,

 

a image-preloader in php is not possible, sure you can do this somehow but php walk on your SERVER and the images loading in the CLIENT

 

so you can use a javascript preloader like this:

 

<html>
<head>
<title>preloader</title>
<script>

/* properties */

url	= "bilder.html";		// rerouting quit after charging

progress= new Array(	"bin.png",	// the name of the file should be loaded
		"clem.png",
		"wai.png",
		"test.jpg",
		"idiot.png",
		"kotze.png");

/* properties end */

var x;
function preload()
{
p	= new Array();
x	= 0;

	for(i=0;i<progress.length;i++)
{
	p[i]		= new Image();
	p[i].onabort 	= update;
	p[i].onerror 	= update;
	p[i].onload  	= update;
	p[i].src	= progress[i];
}
}

function update()
{
x++;
pro=Math.floor((x/progress.length)*100);
document.images["balken"].width=pro*2;

(document.all) ?
dom=document.all["loadausgabe"] :
dom=document.getElementById("loadausgabe");

dom.innerHTML= x+" from "+progress.length+" Images loaded.<br>"+pro+" %";

if(pro==100) location.href=url;
}
</script>
</head>

<body onload="preload()" bgcolor=#617691>
<table width=100% height=100% align=center>
<td align=center>
	<table align=center width=210 height=20>
	<tr>
		<td align=left width=210 valign=top height=20>
			<img src=loadbar.gif>
		</td>
	</tr>
	<tr>
		<td align=left width=210 valign=top height=20>
			<img src=balken.gif height=5 width=0 name=balken>
		</td>
	</tr>
	<tr>
		<td align=left width=210 valign=top height=20>
			<div id="loadausgabe" style="font:10px verdana;color:ffffff">0 von 0 Images Loaded.<br>0 %</div>
		</td>
	</tr>
	</table>
</td>
</table>
</body>
</html>

 

images you have to create:

 

balken.gif (like Loadbar)

loadbar.gif

 

you have to test it, i have create this script without testing. need help? pls post here again.

 

grz heiko

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.