JavaScript - Preload And Call Imgs Like This?

Hi!

I have a website that requires preloading images a lot.

I would like to preload only the most important images first and display the page as quickly as possible.

After that it will take at least 20 seconds before the user will need the rest of the images.

Is there a way of making two preloading groups and have the second group load in background after the page is already visible?

My current preload code is simply like this:

<SCRIPT language="JavaScript">
if (document.images)
{
pic01= new Image(200,200);
pic01.src="images/base.jpg";

pic02= new Image(200,200);
pic02.src="images/grump1.jpg";

pic03= new Image(200,200);
pic03.src="images/grump2.jpg";

pic04= new Image(200,200);
pic04.src="images/grump3.jpg";

pic05= new Image(200,200);
pic05.src="images/grump4.jpg";

pic06= new Image(200,200);
pic06.src="images/love.jpg";

pic07= new Image(200,200);
pic07.src="images/smile1.jpg";

pic08= new Image(200,200);
pic08.src="images/smile2.jpg";

pic09= new Image(200,200);
pic09.src="images/smile3.jpg";

pic10= new Image(200,200);
pic10.src="images/smile4.jpg";

pic10= new Image(200,200);
pic10.src="images/rotate.gif";

}
</SCRIPT>

Hello,

I've some javascript code which preload the images for a photo gallery made of clickable thumbnails and the images to be shown. The script is structured to preload the images in order to have a smooth experience while browsing through the thumbnails but, as the images are needed in quite high quality and can't be compressed any further, the page is too slow to load.

Basically, as the script sits between the head tags at the beginning of the page, it holds the loading of the whole page, leaving the user with a black page for a good 10 seconds on a fast connection.

Is there any chance I can preload the images in such a way I don't have to hold the whole page from displaying while the images are loaded? It would be ideal to be able to display the contents of the page (logo, menu, 1st picture of the gallery and foot of the page) while the images preload in the background.

Could please anybody help with this?

Here is the code I'm using:


<SCRIPT language=JavaScript1.1>
var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("images/gallery/editorial/1.jpg","images/gallery/editorial/2.jpg","images/gallery/editorial/3.jpg","images/gallery/editorial/4.jpg","images/gallery/editorial/5.jpg","images/gallery/editorial/6.jpg","images/gallery/editorial/7.jpg","images/gallery/editorial/8.jpg","images/gallery/editorial/9.jpg","images/gallery/editorial/10.jpg","images/gallery/editorial/11.jpg","images/gallery/editorial/12.jpg","images/gallery/editorial/13.jpg","images/gallery/editorial/14.jpg","images/gallery/editorial/15.jpg","images/gallery/editorial/16.jpg","images/gallery/editorial/17.jpg","images/gallery/editorial/18.jpg","images/gallery/editorial/19.jpg","images/gallery/editorial/20.jpg","images/gallery/editorial/21.jpg","images/gallery/editorial/22.jpg","images/gallery/editorial/23.jpg","images/gallery/editorial/24.jpg","images/gallery/editorial/25.jpg")
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</SCRIPT>


and this is for the thumbnails:

<a onmousedown='changeimage(myimages[0],this.href)'><img src="images/gallery/thumb1.gif" alt="1" width="16" height="16" border="0" /></a>
<a onmousedown='changeimage(myimages[1],this.href)'><img src="images/gallery/thumb2.gif" alt="2" width="16" height="16" border="0" /></a>
<a onmousedown='changeimage(myimages[2],this.href)'><img src="images/gallery/thumb3.gif" alt="3" width="16" height="16" border="0" /></a>
<a onmousedown='changeimage(myimages[3],this.href)'><img src="images/gallery/thumb4.gif" alt="4" width="16" height="16" border="0" /><br />
</a> etc....


Any help would be much appreciated.

Thanks
paolo

Hi, I am completely aware that Framesets are an outdated way of designing these days (I don't have time to redesign the site now), but I have a question:.

Is there a way I can have a "Please wait.. Loading.." message of some sort on the "contents.html" frameset? It takes a while to load..

Code:

<html>

<head>

</head>

<frameset rows="130,*" framespacing="0" border="0" frameborder="0">
	<frame name="banner" scrolling="no" noresize target="contents" src="title.html">
	<frameset cols="523,493">
		<frame name="contents" target="main" src="contents.html" scrolling="auto">
		<frame name="main" src="letters.html" scrolling="auto">
	</frameset>
	<noframes>
	<body>

	<p>This page uses frames, but your browser doesn't support them.</p>

	</body>
	</noframes>
</frameset>

</html>

Thanks so much.

Hello, I'm not sure if this is the best forum for my question or not, but I'll explain what I'm doing and we'll see. I am trying to make a little easter egg hidden inside a web application and its going great except I'd like to hide my .gif files by changing their file extension to something like .dat instead so it won't be so obvious what they are. Basically all I really want to do is have an html image tag that points to a file who's extension is not gif, but really does contain gif content. (I want to mask the fact that the file is really a gif when looking at it in the directory listing.) So, my idea was I would point the <img src=""> tag's src attribute to a cgi script that could write out a Content-type: image/gif header and return the binary gif data. So, I did this and it worked great, but its really slow. (I output the image multiple times and animate it.) So, I thought I could maybe use Javascript to preload these cgi requests and cache them, but every attempt I've made to do this fails! It's like the browser doesn't want to cache the cgi requests. My method of attempting this was to create Image() objects in javascript and set their src attribute to my cgi script call and then set an onload to keep track of when they were all loaded. That seemed to work fine, but then when I try to display an image with the src tag equal to the cgi location (after they were all loaded) its like it goes and reads the code to pull it down again instead of using a cached copy because its really slow. So, then I thought, hey maybe I could just manually edit the binary content of the gif file (which has an extension like .dat) to also contain Content-type: image/gif\n\n embedded at the front of the file. So, I opened the binary file with a hex editor and inserted that text content at the front... but it didn't work. I had <img src="myfile.dat"/> Is there an easy way to make the browser recognize my gif file even if I don't use a gif extension? If not is there a way to preload and cache cgi responses with Javascript so that they don't keep reloading each time I refer to them? Any other ideas? Thanks.

Hello All! Brand new to Javascript here, so please forgive my basic question. I did a search but did not find exactly what I was looking for.

My web site has a splash page with a large image broken into pieces and displayed in a table. I want to preload the images so the user doesn't see the table slowly "fill in" when using a slower internet connection.

I have written a basic script, using the basic format of:

<SCRIPT LANGUAGE="JavaScript">

Image1= new Image(50,60)
Image1.src = "something.gif"

Image2 = new Image(70,80)
Image2.src = "somethingelse"

Image3 = new Image(90,100)
Image3.src = "lastsomething.gif"

</SCRIPT>

and saved it as a .js file and placed it in my sites root directory. Just to be safe, I've placed the images there too. (do I have to do that though?)

Still, it does not seem to be working. Below is the head from my splash page. Have I missed somthing here? I thought that by putting the script reference in the head, the images would be loaded before the table came up, but such does not seem to be the case. Any help would be most appreciated. Thanks!

<html>
<head>
<title>Finish Well Endurance</title>
<meta name="generator" content="Namo WebEditor">
<link type="text/css" rel="stylesheet" href="http://www.fwe1.net/css/index.css">
<script type="text/javascript"language="javascript"src="loadimages.js"></script>
</head>

<body bgcolor="#464646" text="black" link="#464646" vlink="#464646" alink="#464646">
<table border="0" align="center" cellpadding="0" cellspacing="0" width="600">

Hi! I'm just starting to learn java script and have a questions. If anyone could answer this it'd be great.

When preloading images for use in things like mouseout/on/etc what is the proper code?

var image1, image 2;
image1 = new Image()
image1.src = ""
image2 = new Image()
image2.src = ""

OR

var image1
image1....
var image2
image2....


The book I have list both but only the 2nd way I listed works. Why?

Thanks

Hey, I'm a javascript newbie and am frankensteining various bits of code I have managed to find on Lightboxes, preloading, and swapping image

Basically, what I want to happen is to run the mouse over the thumbnails on the left side of the page and a larger version of that is in the middle, while information on the right changes to match the picture in the middle. The information is working and the thumbnails appear to be working- at least they go white when running the mouse over them. The problem is the center images aren't appearing at all.

I think the following is the relevant information.

Code:

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_setTextOfLayer(objId,x,newText) { //v9.0
  with (document) if (getElementById && ((obj=getElementById(objId))!=null))
    with (obj) innerHTML = unescape(newText);
}

Code:

<img src="imagetmb.jpg" name="boxd" id="boxd" onmouseover="MM_swapImage('boxd','','whitebox.jpg','','image.jpg',1);MM_setTextOfLayer('info','','Info<br /><br />Ink on Bristol Paper<br/><br />13 x 17 in<br /><br>May 2011<br/>')" onmouseout="MM_swapImage('boxB','','imagetmb.jpg',1)"/>

I think it's because the images in the center don't have a source, only a name, but I'm not sure where I would fit that in. I tried putting it in the second set of code, but it did not work out.

Hello,

First time on the forum and I am admittedly a complete noob, so forgive me for any grievous misconceptions.

I am a teacher trying to create a bulletin board on my website where students, teachers, and parents can post messages. I am trying to use the site linoit.com I am trying to embed that site on my website using an iframe url: http://www.capretto.net/stickyboard.shtml

My problem is that when you go to the message board on my site it asks your for a username and password to login to access my message board from linoit. I was hoping there is a scripts or other trick that will auto fill the username and password when the page loads so that the message board opens automatically.

Not too worried about privacy, but I could distribute the username and password to all interested parents, teachers, etc. but in my experience one more step between students and the information they need can be the difference between them not receiving the info.

I'd be happy to give any contributors credit on my site for their coding help. Thanks in advance.

Hi all

Is there a way to get the image(s) to load into the table after the page has loaded instead of the way I have it now?

I have 4 tabs, but I would like the imgs in tabs 2,3,4 to load after page load.

Example of how the tabs look.

Code:

    	  <div class="tabbertab">
            <h2>Australia_____</h2>
                      <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFCC">
                       <caption class="highlight_Red">澳洲&nbsp; Australia
                       </caption>
  <tr>
    <td><a href="pages/promotion.html#aus_ACE" rel="nofollow" target="_blank"><img src="pages/images/Pics/AUS/ace.jpg" alt="ACE / ATTC" width="110" height="69" border="0" align="left" class="ozimg_L"/> ...a few more images etc

the other tabs look the same.

LT

Hi,

I am hoping I just need to be pointed in the right direction with this.

I have Page1.

When Page1 body onloads it uses Ajax to call PartA

Within PartA I have a message board so members can write messages which will be sent to my database in PartA[1] and immediately posted for view on to PartA[2]. As I want to have my request to the server updating regularly I want to have PartA[2] on a timed loop to refresh - I do not need the content of PartA[1] to refresh.

So the order of events would look like this:
Page1
|
onload call
|
v
PartA
/ \
V V
PartA[1] PartA[2]
(loads once) (constantly refreshes)

What I am not sure about is that I have <body> and <head> attributes in Page1 only. I have already used my body onload to call PartA (and can't use it to call PartA[2] before PartA has loaded anyway).

I do not want the user to have to click a button or do anything to call up PartA[2].

So my question is how would I get PartA[2] to automatically load within PartA?

I hope I have made this clear, but if I haven't let me know and I will try again.

Hello all,

I am a newbie to api and I want to bring job website into my site using that job website's api. They provide calling url to the xml api to get response.

But I dont to know how to get response through javascript. Can you please help me to call that api through javascript or java?

Hope that it is simple to you.

Thanks in advance...

hi

i'm trying to call a web service from java script code stored NOT in Html but in an extenarl file .js. My code is this:

service.useService("http://localhost:10000/WebS_cod_01/WebS_codEurService.asmx?wsdl", "WebS");

Photo = service.WebS.callService("webS_codEurProcessWS" , photoID);

checking with Firebug i find this message:

"service is not defined"

where i'm wrong ?

thanks in advance

I'm trying to implement this 'ajax' script, however i'm getting the following error: function expected line 25. And I'm not the only person who is getting this error message :S How can the code be altered so it will work?

Also the script isn't executed when I change onclick in onload :S
How come and how can I change it so that it will be executed on launch?

http://chriscook.me/web-development/...icking-a-link/