Hvordan kan man tjekke om billeder er loadede?

Jeg ville bestemt ikke lade brugerne hente 400 billeder for at vise 200, så hellere lave det lidt asynkront, så den kun viser de billeder er der loaded, og et "loading" icon imens.

Det bør du slet ikke bruge et script til, du kan nøjes med lowsrc: http://www.htmlcodetutorial.com/images/_IMG_LOWSRC.html

omg...

-> #2 - kan du ikke henvise til en standard hvor den attribut indgår?

ja, eller i det mindste hvad attributten gør.... og hvor kompatibel den er.

Undskyld, det gik lidt for stærkt, men I behøver ikke at være sarkastiske, og kommentar #3 er direkte dum. I må meget gerne korrigere, men gør det ordentligt klart og tydeligt, for ellers er der ikke nogen som bruge jeres kommentarer til noget.

@sw_red_6 det var vist en gammel proprietær standard jeg fik hevet frem der. Du må ud i complete attributten, billedelement.complete returnerer true når billedet er hentet.

Om det er en god ide at hente lav opløsnings versioner kommer an på det specifikke tilfælde. Uanset hvor små billederne er vil der altid blive tilføjet fast mængde ekstra spildtid, så hvis du har en stak små billeder bliver siden muligvis slet ikke hurtigere af at at lave mindre versioner.

Til tider kan der være adskillige sekunder at spare ved at smække alle billederne sammen i et billede og så "skille dem ad" på siden ved at sætte det samlede billede ind som div baggrund med forskellig placering alt efter hvilket billede der ønskes vist.

Vis os din side, så kan jeg nok svare lidt mere konkret på hvad den bedste løsning er.

complete attributten ? omg igen...

Kom med et bedre svar eller ti stille.

SKAL der være 200 billeder på én side?

.. jeg har givet et bud. og ti stille, er ikke noget der hører hjemme på et fora.

Det skal ikke løses med gammle obsolute attributter/events, men med moderne web2 teknologi. Som om du svarer i en 1990 netscape vs IE verden.... og derfor min fortvivlelse.

Et simpelt tænkt eksempel:

<div id="test">
<img src="/lowrez/1.jpg" />
<img src="/lowrez/2.jpg" />
.... flere billeder
</div>

/* IKKE TESTET */

window.onload = function()
{
var imgs = document.getElementById('test').getElements;
for(i=0; i < imgs.length;i++)
{
imgs[i].src = imgs[i].src.replace('lowrez', 'highrez');
}



Men jeg syntes nu stadig det er smartere asynkront at hente highrez billederne.

/J
}

var imgs = document.getElementById('test').getElementsByTagName('IMG');

Selvfølgelig.....

Ok, det var ihvertfald et svar, men vi skal vel egentlig også have indlæst de store billeder før udskiftningen. Vil du forsøge at gøre det uden brug af complete? Og hvordan?

Jeg vil vente med et endeligt svar til spørgsmålsstilleren har præciseret, specielt vil jeg gerne vide hvor store billederne er.

{
var img = new img();
imgs[i].src = "updating to highrez.gif";
/*preloading........*/
img.src = imgs[i].src.replace('lowrez', 'highrez');
/*Done*/
imgs[i].src = img.src;

}

Det er jo ikke en køb software for fiktive points side det her, men konkrete spørgsmål der skal besvares eller folk skal have hjælp til noget konkret, så jeg har ikke tid til at svare på flere af dine spm.

Spørger er velkommen, du kan bare oprette et spørgsmål hvis du har yderligere ebusisness.

/J

hmm skulle måske præcisere..
Jeg henter navnene med ajax/json og billederne skal vises på en side.
Problemet er at det tager for lang tid at loade alle billederne i deres oprindelige opløsning (min. 50KB pr. billede) så der er lavet en udgave med meget lavere opløsning (ca. 5KB pr. billede), disse billeder tager 1/10 af tiden at loade.
Når de 200 små billeder er loadet skal de skiftes ud med de store billeder.

@splazz: der skal kunne vises op til 200 billeder på siden.

@jokkejensen: Det kunne måske være at det skulle laves med noget asynkron hentning, men hvordan skulle det gøres? og hvordan kan jeg være sikker på at 'loading'-billedet bliver loadet før jeg begynder at skifte src på alle elementerne?
Det kan forresten ikke lade sig gøre at bruge window.onload eftersom elementerne bliver dynamisk oprettet efter siden er færdigloadet..

@ebusiness: Jeg kan ikke vise siden eftersom der er person-følsomme data på den. Desuden er billederne ikke noget som er/vil blive offentligt tilgængeligt.
Det kan heller ikke lade sig gøre at lave et stort billede da det er billeder der bliver oploadet af brugerne selv..
mht. complete - hvis du kan komme med et link så jeg kan se hvor i standarden den er, vil jeg bestemt overveje det...

nej, det jeg ville var IKKE at præsentere de små billeder, men asynkront erstatte "loading.gif" med de store billeder.

Du har ret i at window.onload() afvikles når dom er indlæst og ikke alle billederne, herfra kan de forskellige browser opfatte det lidt forskelligt.

Men der er mange eksempler på samme, måske du kan bruge, jeg vil helst ikke til at udarbejde:

http://jqueryfordesigners.com/image-loading/

mht til complete, hedder den i dag:

var img = new image
img.src = 'sti';
img.onLoad= function(){replace sti;}

Jeg kan ikke lige finde noget der ligner en officiel standard noget sted som inkluderer complete, jeg kan heller ikke finde onload i forbindelse med img elementer. Men begge dele optræder i de facto standarden.

Hvilken standard bruger du jokkejensen? Jeg må indrømme, jeg kan ikke finde noget der ligner en komplet JavaScript standard som kan besvare spørgsmålet.

Standard ? - ECMA-262, men den bruger alle vist når vi taler JS. Den længe ventede nye version kommer jo først til jul "the fifth edition". ECMA bliver så afviklet af forskelle "engines", og derfor vil du opleve at ikke alle metoder og objecter fungerer ens:

http://en.wikipedia.org/wiki/List_of_ECMAScript_engines


(derfor jeg altid bruger jquery, eller et andet lib der håndtere de forskellige browsere)

image objectet har en onload event.

det er ikke et html img element, men et image object i JS.. du blander tingene sammen.

Jeg har været igennem ECMA-262, og der står intet om DOM elementer og de tilhørende funktioner, ordet onload er ikke engang nævnt. Tilsyneladende er det kun en specifikation for basissproget.

Tjaa, new Image (det skal være med stort hvis der skal ske noget) er ikke nævnt i ECMA-262, så hvordan skulle jeg vide hvad det egentlig er for et objekt som opstår? Jeg kan blot konstatere at det tilsyneladende virker ligesom et DOM element, og kan indsættes i dokumentet som sådan.

Alle objekter er ikke lige beskrevet deri, nej, men der findes et image object, her er et færdigt eksempel, jeg gider ikke mere i denne tråd:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" type="text/javascript"></script>
   
    <script type="text/javascript">
        $(document).ready(function()
        {       
            $('button').click(function()
            {
                    $('div').html("Forsøger at henter billede");
                    img = new Image();
                    img.src = $('input').val();
                    $('img').attr('src', img.src);
                    $('div').html("Henter");
                    $(img).load(function()
                    {
                        $('div').html("Færdig");
                    });
            });
                   
        });   
    </script>
</head>
<body>
    <input value="http://farm4.static.flickr.com/3574/3677412593_c833c435c7_o.jpg" type="text" />
    <div>Indtast url til billede</div>
    <button>Hent billede</button>
    <img src="" />   
</body>
</html>

.. hans kode skal så bare sige:

<img class="loadhighrez" src="lowrez" />

$('img.loadhighrez').each
{
  //
}

Vi venter med at lave om på det indtil brugerne vender tilbage med en melding ang. hastigheden.

Jeg lukker spørgsmålet, hvis nogen af jer vil have point så kom med et svar..