Keskustelu: Nettisivujen teko: Javascript: prosenttia ladattu

Voiko JavaScriptillä tarkastaa, että kuinka monta prosenttia on ladattu jostain kuvasta. Tarkoitus on klikkauksen jälkeen näyttää prosentit 0-100 ja näytetään kuva kun se on ladattu kokonaan. Tiedän, että saan .complete-arvolla true/false onko kuva ladattu (kokonaan), mutta saako sitä prosenttilukua jostain?

http://www.seabreezecomputers.com/tips/progress.js

Kurki tuota tiedostoa, se näytti ainakin jokseenkin toimivan testisivullaan (vaihda .js:n tilalle .html)

Olkoonkin että tuo koodi noin muuten on aika karmean näköistä (silmämääräisesti vilaisten).

Nähdäkseni tuo koodi käyttää juurikin punppiksen mainitsemaa .complete arvoa, jolla saa vain totuusarvon, ei kuvan latautumisastetta.

Sivullani on todella raskas koodi, koska se hakee tietoa 32 eri sivulta. Hitailla yhteyksillä se kestää aika kauan. Pysyykö tällä .complete arvolla tekemään tälläisen:
Kun sivua esim.php ladataan, tämän tilalla näkyisi jokin toinen sivu, ja kun sivu esim.php on lataantunut, niin näytetään se?

Uskoisin, että vähän vääntämällä saisi. Jos joku tietää, niin voisiko kertoa? Kiitos

Helpoiten niin, että teet ylimääräisen elementin, jossa on tämä näytettävä asia, ja sijoittelet sen CSS:n avulla latautuvan päälle. Kun latautuminen loppuu, voit piilottaa sen.

Metabolix kirjoitti:

Helpoiten niin, että teet ylimääräisen elementin, jossa on tämä näytettävä asia, ja sijoittelet sen CSS:n avulla latautuvan päälle. Kun latautuminen loppuu, voit piilottaa sen.

Tiedän perjaatteessa miten se menisi, mutta koodaus on se vaikein osuus

MIB kirjoitti:

Metabolix kirjoitti:

Helpoiten niin, että teet ylimääräisen elementin, jossa on tämä näytettävä asia, ja sijoittelet sen CSS:n avulla latautuvan päälle. Kun latautuminen loppuu, voit piilottaa sen.

Tiedän perjaatteessa miten se menisi, mutta koodaus on se vaikein osuus

// haetaan elementti jonka id="jspois"
var jspois = document.getElementById('jspois');
// tarkistetaan saimmeko elementin
if(jspois) {
    // poistetaan elementti
    jspois.parentElement.removeChild(jspois);
}

Tuota sovellat. Merri lähetti tuon koodin https://www.ohjelmointiputka.net/oppaat/opas.php?tunnus=js_01 tuossa aiheessa.

Tuon pätkänhän voi lisätä latautuvan divin loppupäähän ja sitten kun sivu on ladannut, se piilottaa toisen divin.

EDIT: Koodasin sulle avuksi :) Toimii IE 8:lla, Firefoxilla ja Operalla (testattu). Chrome lataa koko sivun ensin (eli toisinsanoen ei toimi Chromella). Tuossa testisivulla php skripti tekee dataa noin 900 kt, jotta tuota on helpompi testata.

Testisivu: http://koti.mbnet.fi/ollins/muuta/testi/muut/wait.php
Testisivun koodi:

<div id="latauskesken"><p>Ladataan sivua... voit sillä aikaa lukasta vaikka tämän:</p><p>plaaplaaplaa</p></div>

<div id="ladattavaelementti" style="display:none">
<!--<?php
for($i=0;$i<1000000;$i++){
print".";
}
?>-->
Ladattu :)
</div>

<script type="text/javascript">
var latauskesken = document.getElementById("latauskesken");
var ladattavaelementti = document.getElementById("ladattavaelementti");

if(latauskesken){
ladattavaelementti.style.display = "block";
latauskesken.innerHTML = "";
latauskesken.display = "none";
}
</script>

Heh, hienoa Olli. Toimii myös IE7:lla. Hieno scripti. Tälle tulee paljon käyttöä.

Hmmm... Valitettavasti tämä ei toimi dynaamisen sivujärjestelmän kanssa. Ensin tämä piilottaa koko sisällön latauksen ajaksi ja sitten näyttää normaalin sisällön.

Kyllä sen vaan pitäisi toimia... Laitatko sivun osoitteen jossa ei toimi?