Keskustelu: Nettisivujen teko: Odota, sivu latautuu -koodi

kayttaja-8361 [06.11.2009 18:31:22]

Hei. Tarvitsen sellaista latauskoodia. Eli kun tulee jonnekkin sivulle jossa on paljon kuvia yms. niin lukee vaikka "Odota, sivu latautuu" tai joku kuva jossa latautuu. Löytyykö koodia?

Short Php [06.11.2009 18:40:42]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Kuvasivu</title>
<script>
function piilotaLatausDiv() {
var ele = document.getElementById("loaddiv");
ele.style.display = "none";
}
</script>
</head>
<body onLoad="piilotaLatausDiv();">
<div id="loaddiv">
Loading website..
</div>
<br>
</body>
</html>

onLoad suoritetaan vasta kun sivu on kokonaan ladattu joten tämän pitäisi toimia

Merri [06.11.2009 18:53:54]

Voit laittaa kuvien taustakuvaksi pyörivän tilannekuvakkeen.

reca [06.11.2009 23:38:41]

Miksi käyttäjälle pitää kertoa, että sivusto latautuu? Eikö sitä huomaa muuten tai auttaako se jotakin kertoa, että vielä latautuu?

Minua kiinnostaisi kuulla lähtökohtainen tarkoitus tälle.

tgunner [07.11.2009 00:12:24]

reca kirjoitti:

Miksi käyttäjälle pitää kertoa, että sivusto latautuu? Eikö sitä huomaa muuten tai auttaako se jotakin kertoa, että vielä latautuu?

Minua kiinnostaisi kuulla lähtökohtainen tarkoitus tälle.

Jos surffaaja siirtyy sivulle, jolla on raskasta sisältöä, voi hän häiriintyä valkoisesta ruudusta ja paniikissa hakata päivitä-nappia aloittaen koko prosessin uudestaan ja uudestaan.

Lebe80 [07.11.2009 02:10:53]

veikkaan että ennen paniikkia käyttäjä on jo siirtynyt toisaalle.

kayttaja-8361 [07.11.2009 12:36:34]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Kuvasivu</title>
<script>
function piilotaLatausDiv() {
var ele = document.getElementById("loaddiv");
ele.style.display = "none";
}
</script>
</head>
<body onLoad="piilotaLatausDiv();">
<div id="loaddiv">
Loading website..
</div>
<br>
</body>
</html>

Siis mihin laitan nyt sen sisällön joka pitää latautua? Oon kokeillut kaikkia kohtia ja kaikkea mahdollista mitä tiedän.

jo123 [07.11.2009 12:48:17]

Ihan mihin vaad body-tagin sisään, paitsi tuon divin =).

Skriptihän odottaa, että koko sivu on latautunut...

kayttaja-8361 [07.11.2009 12:54:17]

Siis kun se lataa niin pitäisi tulla toi "Loading website.. " mutta ei tullut. Selain mozilla.
Laitoin näin koodin:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Kuvasivu</title>
<script>
function piilotaLatausDiv() {
var ele = document.getElementById("loaddiv");
ele.style.display = "none";
}
</script>
</head>
<body onLoad="piilotaLatausDiv();">
sisältö....
<div id="loaddiv">
Loading website..
</div>
<br>
</body>
</html>

Teemu-root [07.11.2009 16:51:06]

Kannattaa käyttää jQuery-nimeä kantavaa js-kirjastoa. onReady-eventtiin voi laittaa koodin, joka suoritetaan kun sivu on valmis. Ensin lataat js-päätteisen tiedoston osoitteesta http://jquery.com/ käytät tätä tai vastaavaa rakennetta:

<!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" xml:lang="fi-FI" lang="fi-FI">
<head>
<title>Loader</title>
<script type="text/javascript" src="jqueryfilunnimi.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $("#loader").css("display", "none");
   $("#content").css("display", "inline");
});
</script>
<style type="text/css">
#loader {
	width: 400px;
	position: fixed;
	left: 50%;
	margin-left: -200px;
	padding: 30px;
	background-color: #c0c0c0;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
}

#content {
	display: none;
}
</style>
</head>

<body>
<div id="loader">
Ladataan, odota blabla...
</div>
<div id="content">
<!-- Koko sivun sisältö tähän -->
</div>

</body>
</html>

Jos haluat hifistellä visuaalista puolta, lisää tekstin kaveriksi animoitu loader-kuva sivulta http://ajaxload.info/ ja kivan raidallisen taustan saat generoitua http://stripegenerator.com/ sivulla.

kayttaja-8361 [07.11.2009 17:30:12]

Sisältö ei tuu. Lukee kokoajan ladataan.

tsuriga [08.11.2009 13:56:08]

Hae jQuery-kirjasto ja laita polku kyseiseen tiedostoon tekstin src="jqueryfilunnimi.js" paikalle edellisessä koodissa, ts. lataa kirjasto sivun head-osiossa.

jessenic [23.11.2009 21:59:00]

Going offtopic:
Sivuillani on kuvia, jotka latautuu hitaasti, mutta haluaisin, ettei niiden hitaus aiheuttaisi muiden osian lataamista vaan kuvan kohdalla voisi pyöriä juuri tuollainen http://ajaxload.info/ kuva. Muuta osaa sivusta pitäisi pystyä käyttämään latauksen aikana. Mikä auttaisi?

Edit. Tai itse asiassa en tarvitse kuvaa, koska minulla on phpllä generoitu kuva, jossa on tekstiä. Teksti on kuvassa hitaan php-skriptin takia, joten jollakin pitäisi saada joko se kuva tai teksti näkymään ilman, ettei sivun muut osat hidastu.

Merri [23.11.2009 22:02:56]

CSS riittää: img { background: url('pyorivakuva.gif') no-repeat 50% 50%; }

jessenic [23.11.2009 22:12:11]

Merri kirjoitti:

CSS riittää: img { background: url('pyorivakuva.gif') no-repeat 50% 50%; }

Nyt se pyörivä kuva tulee vasta hitaan kuvan latautumisen jälkeen sen hitaan kuvan taustalle

Merri [23.11.2009 22:23:30]

Missä järjestyksessä headerisi lataa tyylitiedostot sun muut? Lisäksi välimuistittaminen voi auttaa, esim. .htaccess gzip and cache

Muoks!
Ah joo, tietysti kuville täytyy määritellä jokin leveys ja korkeus. Riippuu hieman siitä, mitä olet tekemässä.

Sivun alkuun

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen

Haku

Tehtävät