Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Need help with image loading

Reply
Thread Tools

Need help with image loading

 
 
Mekon
Guest
Posts: n/a
 
      11-11-2003
I have never written a line of script in my life but I need some help with
it now.

I have this auto generated code which I want to modify if possible

The script generates a strip of thumbnails, and works quite well execpt that
on dial up it is unbearably slow. The Thumbnails themselves are only 10kb
but the total of them is a lot larger. and it appears to need to load them
all before it will display any.


In HTML if the size of the pic is defined the page loads quicker so I was
thinking that I could do the same in this script.

If it is possible, where would I place these dimensions in the script below?



Mekon

<html>
<head>
<title>The Importance of Being Musically Earnest</title>
<meta name="Generator" Content="PhotoCleaner">
</head>

<body bgcolor=white background=film.gif><font color=gray
face="Verdana,Arial,Helvetica">

<script>

var im = new Array(1023);

var SelectedImage = 0;

im[0] = new Image();
im[0].src = 'PC-Earnest02.jpg';
im[0].exif = '';
im[0].thumb = 'Thumbs/PC-Earnest02.jpg';


im[1] = new Image();
im[1].src = 'PC-Earnest03.jpg';
im[1].exif = '';
im[1].thumb = 'Thumbs/PC-Earnest03.jpg';


im[2] = new Image();
im[2].src = 'PC-Earnest04.jpg';
im[2].exif = '';
im[2].thumb = 'Thumbs/PC-Earnest04.jpg';


im[3] = new Image();
im[3].src = 'PC-Earnest05.jpg';
im[3].exif = '';
im[3].thumb = 'Thumbs/PC-Earnest05.jpg';


im[4] = new Image();
im[4].src = 'PC-Earnest09.jpg';
im[4].exif = '';
im[4].thumb = 'Thumbs/PC-Earnest09.jpg';


im[5] = new Image();
im[5].src = 'PC-Earnest10.jpg';
im[5].exif = '';
im[5].thumb = 'Thumbs/PC-Earnest10.jpg';


im[6] = new Image();
im[6].src = 'PC-Earnest16.jpg';
im[6].exif = '';
im[6].thumb = 'Thumbs/PC-Earnest16.jpg';


im[7] = new Image();
im[7].src = 'PC-Earnest17.jpg';
im[7].exif = '';
im[7].thumb = 'Thumbs/PC-Earnest17.jpg';


im[8] = new Image();
im[8].src = 'PC-Earnest18.jpg';
im[8].exif = '';
im[8].thumb = 'Thumbs/PC-Earnest18.jpg';


im[9] = new Image();
im[9].src = 'PC-Earnest19.jpg';
im[9].exif = '';
im[9].thumb = 'Thumbs/PC-Earnest19.jpg';


im[10] = new Image();
im[10].src = 'PC-Earnest20.jpg';
im[10].exif = '';
im[10].thumb = 'Thumbs/PC-Earnest20.jpg';


im[11] = new Image();
im[11].src = 'PC-Earnest21.jpg';
im[11].exif = '';
im[11].thumb = 'Thumbs/PC-Earnest21.jpg';


im[12] = new Image();
im[12].src = 'PC-Earnest22.jpg';
im[12].exif = '';
im[12].thumb = 'Thumbs/PC-Earnest22.jpg';


im[13] = new Image();
im[13].src = 'PC-Earnest25.jpg';
im[13].exif = '';
im[13].thumb = 'Thumbs/PC-Earnest25.jpg';


im[14] = new Image();
im[14].src = 'PC-Earnest26.jpg';
im[14].exif = '';
im[14].thumb = 'Thumbs/PC-Earnest26.jpg';


im[15] = new Image();
im[15].src = 'PC-Earnest27.jpg';
im[15].exif = '';
im[15].thumb = 'Thumbs/PC-Earnest27.jpg';


im[16] = new Image();
im[16].src = 'PC-Earnest29.jpg';
im[16].exif = '';
im[16].thumb = 'Thumbs/PC-Earnest29.jpg';


im[17] = new Image();
im[17].src = 'PC-Earnest30.jpg';
im[17].exif = '';
im[17].thumb = 'Thumbs/PC-Earnest30.jpg';


im[18] = new Image();
im[18].src = 'PC-Earnest31.jpg';
im[18].exif = '';
im[18].thumb = 'Thumbs/PC-Earnest31.jpg';


im[19] = new Image();
im[19].src = 'PC-Earnest35.jpg';
im[19].exif = '';
im[19].thumb = 'Thumbs/PC-Earnest35.jpg';

i = 0;

document.write('<center>');

while (im[i]) {
document.write('<a href="" onclick="return ShowDetails(' + i + ');"><img
align=center hspace=10 name="_' + im[i].name + '" border=0 src="' +
im[i].thumb + '"></a><br><br>');
i++;
}


var inter = window.setInterval("ShowDetails(0)", 200);

slide=0;

function isIE() {
return navigator.appName == 'Microsoft Internet Explorer';
}

function ShowDetails(i) {
parent.frames["main"].document.images[0].src = im[i].src;
document.images[SelectedImage].border = 0;
parent.document.title = document.title;
if (isIE()) {
parent.main.Descr.innerHTML = im[i].exif;
} else {
parent.frames["main"].document.forms[0]["Descr"].value =
im[i].exif.replace(/<br>/g,"\n");
if (im[i].exif == "") {

parent.frames["main"].document.forms[0]["Descr"].style.display='none';
} else {

parent.frames["main"].document.forms[0]["Descr"].style.display='block';
}
}
SelectedImage = i;
document.images[SelectedImage].style.borderStyle = "dotted";
document.images[SelectedImage].style.borderColor = "gray";
document.images[SelectedImage].border = 3;
if (document.images[SelectedImage].offsetTop < document.body.scrollTop) {
document.body.scrollTop = document.images[SelectedImage].offsetTop-10;
}
if
(document.images[SelectedImage].offsetTop+document.images[SelectedImage].hei
ght > document.body.scrollTop+document.body.clientHeight ) {
document.body.scrollTop =
(document.images[SelectedImage].offsetTop+document.images[SelectedImage].hei
ght)-document.body.clientHeight+10;
}
slide = SelectedImage;
window.clearInterval(inter);
return false;
}


var slideshowinterval = 0;

function ShowStart(){
slideshowinterval = window.setInterval("SlideShow()", 5000);
}

function ShowStop(){
window.clearInterval(slideshowinterval);
}


function SlideShow() {
slide++;
if (!im[slide]) {
slide=0;
}
ShowDetails(slide);
}

</script>

</body>
</html>







--
http://www.camelraces.com/


 
Reply With Quote
 
 
 
 
Mike
Guest
Posts: n/a
 
      11-12-2003
new Image([width,] [height])

so

> im[0] = new Image();
> im[0].src = 'PC-Earnest02.jpg';
> im[0].exif = '';
> im[0].thumb = 'Thumbs/PC-Earnest02.jpg';


would look like

> im[0] = new Image(20, 20);
> im[0].src = 'PC-Earnest02.jpg';
> im[0].exif = '';
> im[0].thumb = 'Thumbs/PC-Earnest02.jpg';



But this line of code scares me

var im = new Array(1023);

That indicates that you are going to have an image array with 1023
thumbnails. Aint no way you're going to get any performance boost that makes
loading 1023 images over dial up "speedy".

Good luck



"Mekon" <(E-Mail Removed)> wrote in message
news:CMdsb.7269$(E-Mail Removed)...
> I have never written a line of script in my life but I need some help with
> it now.
>
> I have this auto generated code which I want to modify if possible
>
> The script generates a strip of thumbnails, and works quite well execpt

that
> on dial up it is unbearably slow. The Thumbnails themselves are only 10kb
> but the total of them is a lot larger. and it appears to need to load them
> all before it will display any.
>
>
> In HTML if the size of the pic is defined the page loads quicker so I was
> thinking that I could do the same in this script.
>
> If it is possible, where would I place these dimensions in the script

below?
>
>
>
> Mekon
>
> <html>
> <head>
> <title>The Importance of Being Musically Earnest</title>
> <meta name="Generator" Content="PhotoCleaner">
> </head>
>
> <body bgcolor=white background=film.gif><font color=gray
> face="Verdana,Arial,Helvetica">
>
> <script>
>
> var im = new Array(1023);
>
> var SelectedImage = 0;
>
> im[0] = new Image();
> im[0].src = 'PC-Earnest02.jpg';
> im[0].exif = '';
> im[0].thumb = 'Thumbs/PC-Earnest02.jpg';
>
>
> im[1] = new Image();
> im[1].src = 'PC-Earnest03.jpg';
> im[1].exif = '';
> im[1].thumb = 'Thumbs/PC-Earnest03.jpg';
>
>
> im[2] = new Image();
> im[2].src = 'PC-Earnest04.jpg';
> im[2].exif = '';
> im[2].thumb = 'Thumbs/PC-Earnest04.jpg';
>
>
> im[3] = new Image();
> im[3].src = 'PC-Earnest05.jpg';
> im[3].exif = '';
> im[3].thumb = 'Thumbs/PC-Earnest05.jpg';
>
>
> im[4] = new Image();
> im[4].src = 'PC-Earnest09.jpg';
> im[4].exif = '';
> im[4].thumb = 'Thumbs/PC-Earnest09.jpg';
>
>
> im[5] = new Image();
> im[5].src = 'PC-Earnest10.jpg';
> im[5].exif = '';
> im[5].thumb = 'Thumbs/PC-Earnest10.jpg';
>
>
> im[6] = new Image();
> im[6].src = 'PC-Earnest16.jpg';
> im[6].exif = '';
> im[6].thumb = 'Thumbs/PC-Earnest16.jpg';
>
>
> im[7] = new Image();
> im[7].src = 'PC-Earnest17.jpg';
> im[7].exif = '';
> im[7].thumb = 'Thumbs/PC-Earnest17.jpg';
>
>
> im[8] = new Image();
> im[8].src = 'PC-Earnest18.jpg';
> im[8].exif = '';
> im[8].thumb = 'Thumbs/PC-Earnest18.jpg';
>
>
> im[9] = new Image();
> im[9].src = 'PC-Earnest19.jpg';
> im[9].exif = '';
> im[9].thumb = 'Thumbs/PC-Earnest19.jpg';
>
>
> im[10] = new Image();
> im[10].src = 'PC-Earnest20.jpg';
> im[10].exif = '';
> im[10].thumb = 'Thumbs/PC-Earnest20.jpg';
>
>
> im[11] = new Image();
> im[11].src = 'PC-Earnest21.jpg';
> im[11].exif = '';
> im[11].thumb = 'Thumbs/PC-Earnest21.jpg';
>
>
> im[12] = new Image();
> im[12].src = 'PC-Earnest22.jpg';
> im[12].exif = '';
> im[12].thumb = 'Thumbs/PC-Earnest22.jpg';
>
>
> im[13] = new Image();
> im[13].src = 'PC-Earnest25.jpg';
> im[13].exif = '';
> im[13].thumb = 'Thumbs/PC-Earnest25.jpg';
>
>
> im[14] = new Image();
> im[14].src = 'PC-Earnest26.jpg';
> im[14].exif = '';
> im[14].thumb = 'Thumbs/PC-Earnest26.jpg';
>
>
> im[15] = new Image();
> im[15].src = 'PC-Earnest27.jpg';
> im[15].exif = '';
> im[15].thumb = 'Thumbs/PC-Earnest27.jpg';
>
>
> im[16] = new Image();
> im[16].src = 'PC-Earnest29.jpg';
> im[16].exif = '';
> im[16].thumb = 'Thumbs/PC-Earnest29.jpg';
>
>
> im[17] = new Image();
> im[17].src = 'PC-Earnest30.jpg';
> im[17].exif = '';
> im[17].thumb = 'Thumbs/PC-Earnest30.jpg';
>
>
> im[18] = new Image();
> im[18].src = 'PC-Earnest31.jpg';
> im[18].exif = '';
> im[18].thumb = 'Thumbs/PC-Earnest31.jpg';
>
>
> im[19] = new Image();
> im[19].src = 'PC-Earnest35.jpg';
> im[19].exif = '';
> im[19].thumb = 'Thumbs/PC-Earnest35.jpg';
>
> i = 0;
>
> document.write('<center>');
>
> while (im[i]) {
> document.write('<a href="" onclick="return ShowDetails(' + i +

');"><img
> align=center hspace=10 name="_' + im[i].name + '" border=0 src="' +
> im[i].thumb + '"></a><br><br>');
> i++;
> }
>
>
> var inter = window.setInterval("ShowDetails(0)", 200);
>
> slide=0;
>
> function isIE() {
> return navigator.appName == 'Microsoft Internet Explorer';
> }
>
> function ShowDetails(i) {
> parent.frames["main"].document.images[0].src = im[i].src;
> document.images[SelectedImage].border = 0;
> parent.document.title = document.title;
> if (isIE()) {
> parent.main.Descr.innerHTML = im[i].exif;
> } else {
> parent.frames["main"].document.forms[0]["Descr"].value =
> im[i].exif.replace(/<br>/g,"\n");
> if (im[i].exif == "") {
>
> parent.frames["main"].document.forms[0]["Descr"].style.display='none';
> } else {
>
> parent.frames["main"].document.forms[0]["Descr"].style.display='block';
> }
> }
> SelectedImage = i;
> document.images[SelectedImage].style.borderStyle = "dotted";
> document.images[SelectedImage].style.borderColor = "gray";
> document.images[SelectedImage].border = 3;
> if (document.images[SelectedImage].offsetTop < document.body.scrollTop)

{
> document.body.scrollTop =

document.images[SelectedImage].offsetTop-10;
> }
> if
>

(document.images[SelectedImage].offsetTop+document.images[SelectedImage].hei
> ght > document.body.scrollTop+document.body.clientHeight ) {
> document.body.scrollTop =
>

(document.images[SelectedImage].offsetTop+document.images[SelectedImage].hei
> ght)-document.body.clientHeight+10;
> }
> slide = SelectedImage;
> window.clearInterval(inter);
> return false;
> }
>
>
> var slideshowinterval = 0;
>
> function ShowStart(){
> slideshowinterval = window.setInterval("SlideShow()", 5000);
> }
>
> function ShowStop(){
> window.clearInterval(slideshowinterval);
> }
>
>
> function SlideShow() {
> slide++;
> if (!im[slide]) {
> slide=0;
> }
> ShowDetails(slide);
> }
>
> </script>
>
> </body>
> </html>
>
>
>
>
>
>
>
> --
> http://www.camelraces.com/
>
>



 
Reply With Quote
 
 
 
 
Mekon
Guest
Posts: n/a
 
      11-12-2003

"Mike" <mike{removeToemail}@synovic.com> wrote in message
news:(E-Mail Removed)...
> new Image([width,] [height])
>
> so
>
> > im[0] = new Image();
> > im[0].src = 'PC-Earnest02.jpg';
> > im[0].exif = '';
> > im[0].thumb = 'Thumbs/PC-Earnest02.jpg';

>
> would look like
>
> > im[0] = new Image(20, 20);
> > im[0].src = 'PC-Earnest02.jpg';
> > im[0].exif = '';
> > im[0].thumb = 'Thumbs/PC-Earnest02.jpg';

>
>
> But this line of code scares me
>
> var im = new Array(1023);
>
> That indicates that you are going to have an image array with 1023
> thumbnails. Aint no way you're going to get any performance boost that

makes
> loading 1023 images over dial up "speedy".
>
> Good luck
>
>

There isn't that many images.... *that* might be part of the problem.

Thanks

Mekon


 
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
order of iframe loading with document loading ofir Javascript 0 12-03-2007 12:06 PM
loading image -> detect when image is done loading edfialk Javascript 0 05-10-2007 07:28 PM
[OT] Is loading the second Java application faster than loading the first? David Segall Java 2 01-02-2007 04:41 PM
Image loading using javascript. Handling timeouts and parrallel loading under IE zborisau@gmail.com Javascript 4 08-28-2005 02:02 PM
help: loading binary image data into memory rixdelei Python 4 04-12-2005 08:25 PM



Advertisments