Need help with image loading

Discussion in 'Javascript' started by Mekon, Nov 11, 2003.

  1. Mekon

    Mekon Guest

    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>







    --
    http://www.camelraces.com/
     
    Mekon, Nov 11, 2003
    #1
    1. Advertising

  2. Mekon

    Mike Guest

    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" <> wrote in message
    news:CMdsb.7269$...
    > 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>
    >
    >
    >
    >
    >
    >
    >
    > --
    > http://www.camelraces.com/
    >
    >
     
    Mike, Nov 12, 2003
    #2
    1. Advertising

  3. Mekon

    Mekon Guest

    "Mike" <mike{removeToemail}@synovic.com> wrote in message
    news:...
    > 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
     
    Mekon, Nov 12, 2003
    #3
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. rixdelei
    Replies:
    4
    Views:
    376
    rixdelei
    Apr 12, 2005
  2. David Segall
    Replies:
    2
    Views:
    465
    Thomas Kellerer
    Jan 2, 2007
  3. Replies:
    4
    Views:
    344
  4. edfialk
    Replies:
    0
    Views:
    214
    edfialk
    May 10, 2007
  5. ofir
    Replies:
    0
    Views:
    201
Loading...

Share This Page