[Javascript] Laden van de inhoud van een div met laadbalk

[bdu]

Beste,

Ik heb momenteel een website, met een header, een footer en een menu aan de linkerkant. De site in opgedeeld in een aantal DIV's. In de middelste div laad ik alle content. Een veel toegepaste opdeling in mijn ogen, gaat ook allemaal prima.

Site:

code:

 _______________
|_______________|
|  |            |
|  |content.php |
|  |            |
|__|____________|

Nu ben ik met een script bezig geweest die behoorlijk wat data moet ophalen uit verschillende .txt en .xls bestanden en database(s), deze doet er nogal lang over. Het resultaat wordt uiteindelijk getoond in de middelste div, tezamen met wat andere div’s met content.

Content.php:

code:

 _______________
|_______________|
|__script.php___|
|___content_a___|
|___content_b___|
|_______________|

Nu zou ik graag bij het laden van de pagina de gebruiker een laadbalk (oid) willen tonen. Nu kan ik dit doen over de gehele pagina (dit is geen probleem, een onload in de body tag oid) maar ik wil dit eigenlijk alleen doen voor de betreffende div. En een onload op de div dat gaat niet werken? Ook zou ik dan wel willen dat de gehele pagina is geladen en daarna content.php (met het script) wordt gedraaid.

Heb al gekeken naar AJAX of jQuery achtige toepassingen maar daar kom ik niet helemaal uit. Zou iemand mij hiermee op weg kunnen helpen?

[NiteSpeed]

Je kan jQuery heel makkelijk een DOM Ready functie geven en vervolgens een paar functies draaien
Zie bijvoorbeeld deze code om de DOM te laden, vervolgens de content div te targeten, een lader te initialiseren en terwijl de lader te zien is de content te laden in de achtergrond via een ajax request

code:

//Dit voeren we pas uit zodra de DOM geladen is
$(document).ready(function () {
   //Hier je code om de content in te laden in de DIV die jij wilt
   $('#content").html('<img src="/images/ajax-loader.gif"</p>');
   $("#content").load("content.php");
});

[ Voor 46% gewijzigd door NiteSpeed op 07-01-2010 13:27 . Reden: Toevoeging van loader.gif ]

[HuHu]

Wil je een progressbar of een loading icon?

[Compuhair]

HuHu schreef op donderdag 07 januari 2010 @ 13:30:
Wil je een progressbar of een loading icon?

ik zou de topicstarter willen aanraden op een loading icon te gebruiken. Het heeft een reden dat je die tegenwoordig zo vaak ziet, en de progresbar veel minder. En als je wel een balk wilt gebruiken, dan kan je het beste er eentje nemen die van links naar rechts blijft lopen (en dus nooit klaar is), en niet eentje die van 0 tot 100% laadt. Voor de details moet je maar ff bingen.

Loading icon is ook simpel te implementeren volgens mij; Animated gifje en dat verbergen op het moment dat het laden voltooid is.

[bdu]

NiteSpeed schreef op donderdag 07 januari 2010 @ 13:23:
Je kan jQuery heel makkelijk een DOM Ready functie geven en vervolgens een paar functies draaien
Zie bijvoorbeeld deze code om de DOM te laden, vervolgens de content div te targeten, een lader te initialiseren en terwijl de lader te zien is de content te laden in de achtergrond via een ajax request

code:

//Dit voeren we pas uit zodra de DOM geladen is
$(document).ready(function () {
   //Hier je code om de content in te laden in de DIV die jij wilt
   $('#content").html('<img src="/images/ajax-loader.gif"</p>');
   $("#content").load("content.php");
});

Klinkt logisch ;-) Eens kijken of ik daar uit ga komen.. nog niet eerder iets mee gedaan.

@HuHu & Compuhair, thanks, zo een GIF-je lijkt inderdaad wat makkelijker.