Need help with image loading

M

Mekon

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) {
document.write('<a href="" onclick="return ShowDetails(' + i + ');"><img
align=center hspace=10 name="_' + im.name + '" border=0 src="' +
im.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.src;
document.images[SelectedImage].border = 0;
parent.document.title = document.title;
if (isIE()) {
parent.main.Descr.innerHTML = im.exif;
} else {
parent.frames["main"].document.forms[0]["Descr"].value =
im.exif.replace(/<br>/g,"\n");
if (im.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>
 
M

Mike

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';
Click to expand...

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';
Click to expand...


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 said:
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) {
document.write('<a href="" onclick="return ShowDetails(' + i + ');"><img
align=center hspace=10 name="_' + im.name + '" border=0 src="' +
im.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.src;
document.images[SelectedImage].border = 0;
parent.document.title = document.title;
if (isIE()) {
parent.main.Descr.innerHTML = im.exif;
} else {
parent.frames["main"].document.forms[0]["Descr"].value =
im.exif.replace(/<br>/g,"\n");
if (im.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
Click to expand...
(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>
Click to expand...
 
M

Mekon

Mike said:
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';
Click to expand...

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';
Click to expand...


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
Click to expand...
There isn't that many images.... *that* might be part of the problem.

Thanks

Mekon
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with Visual Lightbox: Scripts 2
Problem with codewars. 5
Help with code 0
Help with my responsive home page 2
Help With a Script 5
What is wrong with my JSON string??? 6
I Need Help with making a function that draws in a canvas using location data. 1
My sliding panel in React Js with graphs on it renders nothing but a blank screen--need help 0

Members online

No members online now.
Total: 35 (members: 1, guests: 34)
Robots: 240

Forum statistics

Threads
473,756
Messages
2,569,535
Members
45,008
Latest member
obedient dusk

Latest Threads

Top