[JS] Preloaden werkt niet - Softwareontwikkeling

dinsdag 7 maart 2006 15:22

Acties:

Verwijderd

Topicstarter

Hallo, ik heb voor het eerst zelf een javascript geschreven en ik heb opgezocht hoe je moet preloaden. (met een array)
welja, ik dit gedaan en die functie wordt uitgevoerd bij mijn media pagina (body onload="maakFotoArray();")
Als ik dit online bekijk werkt het niet. of toch niet zoals ik verwacht hoe het zou werken. Ik zou ook graag een laad percentage weergeven of een bericht dat de foto's aan het laden zijn, maar hoe ik daaraan moet beginnen weet ik totaal niet, ik heb gegoogled maar niets nuttigs tegengekomen
hier heb je mijn code

PHP:

/**
* By Jelle Victoor
* Alle Foto's moeten van het formaat zijn naam_fotonummer.extentie
**/

var fotoNr;
var DIM = 152; // hier vul je het aantal foto's in
var LOC = "images/photo/org/st_";
var LOC_THUMB = "images/photo/thumbs/thumb_st_";// hier vul je de locatie in met de prefix van je foto's
var EXT = ".jpg"; // hier geef je de extentie op voor je foto's
var thumbArray = new Array(DIM); // in deze Array worden alle thumbObjecten opgeslagen
var fotoArray = new Array(DIM);// in deze Array worden alle fotoObjecten opgeslagen
var atlFoto;

// Pop-up, gebruikt voor gastenboek
function MM_openBrWindow(theURL,winName,features)
{    
    window.open(theURL,winName,features);
}
// Hiermee wordt de fotobrowser geopend met daarin de foto die geselecteerd werd.

function maakFotoArray()
{
    // preload main images
    for(i = 0; i < DIM; i++)
    {
        fotoArray[i] = new Image()
        fotoArray[i].src = LOC + eval(i+1) + EXT;
    }
    // preload thumbs
    for(i = 0; i < DIM; i++)
    {
        thumbArray[i] = new Image()
        thumbArray[i].src = LOC_THUMB + eval(i+1) + EXT;
    }
    
    atlFoto = eval(fotoArray.length + 1);
}

function toon(fotoNr)
{
    myWin=open("","","width=400,height=450,status=no,toolbar=no,menubar=no");
    myWin.document.open();
    myWin.document.writeln("<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>");
    myWin.document.writeln("<html xmlns='http://www.w3.org/1999/xhtml'>");
    myWin.document.writeln("<head>");
    myWin.document.writeln("<title>");
    myWin.document.writeln("Foto Browser");
    myWin.document.writeln("</title>");
    myWin.document.writeln("<script type='text/javascript' src='script/script.js'></script>");
    myWin.document.writeln("<link href='style.css' rel='stylesheet' type='text/css' />");
    myWin.document.writeln("</head>");
    myWin.document.writeln("<body onload='maakFotoArray();'>");
    myWin.document.write("<div class='centerf'><img src = '");
    myWin.document.write(fotoArray[eval(fotoNr-1)].src);
    myWin.document.write("' alt='Sample This!' id='foto' /></div>");    
    myWin.document.writeln("<table border='0' width='100%'><tr><td><a href='javascript:prev();'><-- vorige foto</a></td><td align='right'><a href='javascript:next();'>volgende foto --></a></td></tr><tr align='center'><td colspan='2'>");
    myWin.document.write("foto <span id='fotoNr'>");
    myWin.document.write(fotoNr);
    myWin.document.write("</span> van de ");
    myWin.document.write(fotoArray.length);
    myWin.document.write(" Foto's<br/><a href='javascript:window.close();'>sluiten</a>");
    myWin.document.writeln("</body>");
    myWin.document.writeln("</html>");
    myWin.document.close();
    
}

function getFotoNr()
{
    return document.getElementById("fotoNr").firstChild.nodeValue;
}

function veranderFoto(fotoNr)
{
    document.getElementById("foto").src = fotoArray[fotoNr].src;
    document.getElementById("fotoNr").firstChild.nodeValue = eval(fotoNr + 1);
}
function next()
{
    if(getFotoNr()<fotoArray.length)
    {
        veranderFoto(eval(getFotoNr()));
    }
    else
    {
        veranderFoto(0);
    }
}

function prev()
{
    if(getFotoNr()>1)
    {
        veranderFoto(getFotoNr() - 2);
    }
    else
    {
        veranderFoto(eval(fotoArray.length - 1));
    }
    
}

dinsdag 7 maart 2006 15:52

Acties:

André

Analytics dude

Je maakt veel gebruik van eval om ergens een string van te maken, in feite moet je proberen eval te vermijden, het is ranzig en traag. Dit zou je kunnen veranderen:

code:

1
2
3

thumbArray[i].src = LOC_THUMB + eval(i+1) + EXT; 
in:
thumbArray[i].src = "" + LOC_THUMB + (i+1) + EXT;

En wat werkt er niet precies dan, wat gaat er fout?

dinsdag 7 maart 2006 16:12

Acties:

Verwijderd

Topicstarter

ik had dat opgezocht hoe dat preloaden werkte en daarmee dat ik die array heb opgebouwd.
Maar als je naar de pagina gaat

http://users.skynet.be/jellepunk/sample/media.html

dan duurt het nog steeds zeer lang om te laden. Werkt mijn preloaden nu? of niet? en als het wel werkt, hoe kan ik eventueel met een preload percentage werken? of met een loading bericht?

Die eval heb ik nodig om dit te doen bijvoorbeeld

code:

1	fotoNr + 1

als ik die eval weglaat krijg ik (als fotoNr 5 is) 51 ipv 6.
Als ik daar dus

code:

1	"" + fotoNr + 1

van maak zou het moeten lukken?

[ Voor 16% gewijzigd door Verwijderd op 07-03-2006 16:19 ]

dinsdag 7 maart 2006 16:28

Acties:

André

Analytics dude

Verwijderd schreef op dinsdag 07 maart 2006 @ 16:12:
ik had dat opgezocht hoe dat preloaden werkte en daarmee dat ik die array heb opgebouwd.
Maar als je naar de pagina gaat

http://users.skynet.be/jellepunk/sample/media.html

dan duurt het nog steeds zeer lang om te laden. Werkt mijn preloaden nu? of niet?

Het laden van de initiele pagina duurt wel even ja, maar de foto's in de popup hoeven niet opnieuw te laden volgens mij (ik weet het niet helemaal zeker, de internet-verbinding is hier heel snel) dus dat werkt prima.

en als het wel werkt, hoe kan ik eventueel met een preload percentage werken? of met een loading bericht?

Hoe bedoel je, je wilt bijhouden hoeveel plaatjes al geladen zijn? Je kunt met de onload method bijhouden hoeeel er al geladen zijn.

Die eval heb ik nodig om dit te doen bijvoorbeeld
code:
1
fotoNr + 1
als ik die eval weglaat krijg ik (als fotoNr 5 is) 51 ipv 6.
Als ik daar dus
code:
1
"" + fotoNr + 1
van maak zou het moeten lukken?

Nee, dan gebruik je parseInt

code:

1	parseInt(fotoNr) + 1

dinsdag 7 maart 2006 16:33

Acties:

Verwijderd

Topicstarter

André schreef op dinsdag 07 maart 2006 @ 16:28:
Het laden van de initiele pagina duurt wel even ja, maar de foto's in de popup hoeven niet opnieuw te laden volgens mij (ik weet het niet helemaal zeker, de internet-verbinding is hier heel snel) dus dat werkt prima.

Is mijn manier van preloaden dan juist? en wat bedoel je met opnieuw laden in de popup?
als je op volgende klikt dan zie je nog de oude foto todat de nieuwe volledig geladen is, dit schept verwarring want je kan zo snel 100 foto's verder klikken en nog steeds dezelfde foto zien

Hoe bedoel je, je wilt bijhouden hoeveel plaatjes al geladen zijn? Je kunt met de onload method bijhouden hoeeel er al geladen zijn.

Ja, een soort van:
"even geduld, x van DIM foto's geladen"

dinsdag 7 maart 2006 16:34

Acties:

crisp

Devver

Pixelated

JavaScript:

var fotoNr = 1;

alert("" + fotoNr + 1); // 11
alert("" + (fotoNr + 1)); // 2

eval is bijna nooit nodig; zeker in dit soort gevallen gewoon opletten van welk type je operands zijn en met welke precedence bepaalde operations worden uitgevoerd...

Intentionally left blank

dinsdag 7 maart 2006 23:10

Acties:

crisp

Devver

Pixelated

Een simpele preloader die status bijhoudt (uit DHTML Lemmings):

JavaScript:

var images = [];

function preload()
{
    var preload_arr = [
        'pic1.gif',
        'pic2.gif',
        'pic3.gif',
        'pic4.gif'
    ];

    for (var i = 0; i < preload_arr.length; i++)
    {
        images[i] = new Image();
        images[i].loaded = false;
        images[i].onload = imgloaded;
        images[i].onerror = imgloaded;
        images[i].onabort = imgloaded;
        images[i].src = preload_arr[i];
    }

    setTimeout('progress()', 100);
}

function imgloaded()
{
    this.loaded = true;
}

function progress()
{
    var curprogress = 0, i = images.length;
    while (i--)
    {
        if (images[i].complete || images[i].loaded)
        {
            images[i].loaded = true;
            curprogress++;
        }
    }

    var w = Math.round(curprogress * (560 / images.length));
    document.getElementById('progressbar').style.width = w + 'px';

    if (curprogress < numpics) setTimeout('progress()', 100);
    else start();
}

Intentionally left blank