473,383 Members | 1,859 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,383 software developers and data experts.

Need help with image loading

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/
Jul 20 '05 #1
2 2341
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" <bl*********@hotmail.com> wrote in message
news:CM****************@news-server.bigpond.net.au... 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/

Jul 20 '05 #2

"Mike" <mi*****************@synovic.com> wrote in message
news:Sq********************@comcast.com...
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
Jul 20 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Rob Manger | last post by:
Hi All, I am hoping someone can help me. I am trying to setup my main page so that when the user moves the mouse over an image, it changes the source (got this working). When the user CLICKS...
1
by: Adam Ratcliffe | last post by:
I'm trying to come up with a solution for detecting when an image, loaded by a script, has completely loaded. The Image.onload event is fired after the image has loaded in Firefox but before...
3
by: B Maxey | last post by:
I am storing images in a database and need a way to browse those files. I can load the files into an image list or whatever the control needs, but I need a control. It doesn't seem that any of...
4
by: Sharon | last post by:
Hi Everyone, I have a TIF file 62992 x 113386 Pixels, Huffman RLE compression, 3200 x 3200 DPI resolution, binary colored (1 Bit Per Pixel), file on disk size 43.08 MB (45,169,042 Bytes). This...
2
by: Irfan Akram | last post by:
Hi Guys, I asked this question yesterday, but have not yet received a suitable answer. I hope you guys can help me out. I want to load an image on to a web-page. The image is alreday stored in...
10
by: abcd | last post by:
I have PIL 1.1.5 on python 2.4.1 and I am attempting to get a smaller (file size) of an image. for example: im = ImageGrab.grab() im.save("tmp.gif") ---- about 1.7mb im.save("tmp.jpeg") ...
4
by: Tim Streater | last post by:
I have a small image on my web page that, when clicked, does some javascript stuff which changes the page. To highlight that this has happened, I want to replace the image with another. Each is a...
6
by: Cruithne3753 | last post by:
I'm trying to create a Windows app with a clickable index of images within a local folder. Within a loop I've got:- PictureBox pb = new PictureBox(); pb.Image = Image.FromFile(file); .......
1
by: ttamilvanan81 | last post by:
Hai everyone, I am working with a Image/Video Application. I need to display and play any video file in browser. Now i am using the following Embed Tag. <OBJECT ID="mediaPlayer" ...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.