Jquery Progressbar für XML-Ladescript

B

Blaubär

Mitglied
Hallo mal wieder,

ich möchte mich jetzt noch mal an Euch wenden, da ich gerade nicht weiter komme.
Ich habe jetzt schon einige Ansätze ausprobiert, aber irgendwie habe ich das Gefühl,
das irgendetwas grundlegent murks ist - bei meinen Versuchen.
Also ich habe folgendes Script (danke Jan :) ):
Code: 
function ladeXML (pfad) {
 
        var mc = $('#mediaContainer');
              mcUl = $('#mediaContainer ul');
 
        // ganze XML-datei einlesen und in variable 'XMLmediaArray' speichern
        $.get(pfad, function(XMLmediaArray){
        
            if (mcUl.length === 0) {
                ul = $("<ul data-role='listview' >");
                mc.append(ul);
            }
            
            $(XMLmediaArray).find("bluray").each(function(){
 
                // gefundenen abschnitt in variable zwischenspeichern (cachen)
                var $myMedia = $(this)
                var id = $myMedia.attr("id");
                var title = $myMedia.attr("title");
                var description = $myMedia.find("description").text();
                var genre = $myMedia.find("genre").text();
 
                mcUl.append("<li>"+title+"<p>"+id+" # "+description+" # "+genre+"</p></li>");
 
            });
 
            mcUl.listview('refresh');
 
        });
    });
}
Welches ich von einer Seite so aufrufe:
Code: 
<script type="text/javascript">
  	$(document).ready(function(){ladeXML('xml/test.xml');});
</script>
Ich möchte gern einen Ladebalken umsetzen, der bevor die ganze Seite geladen ist angezeigt wird,
ist dann alles aus der XML geladen sollte der Balken natürlich auch wieder verschwinden.
Meine Versuche zeigten entweder erst einen Ladebalken, wenn eh schon die ganze Seite mit den
XML-Inhalten da ist und verschwand dann auch nicht mehr.
Oder es wurden keine Inhalte mehr aus der XML aufgeführt.
Habt Ihr vielleicht einen Tipp für mich, denn ich glaube ich stehe gerade total auf dem Schlauch...

LG, Blaubär
 
Wo ist der Ladebalken und wie wird berechnet wie lange er "laufen" muss?

Eine 100% Lösung habe ich nicht weil ich a) eben nicht weiß wie man die Ladezeit berechnet und b) weil der Ladebalken erst zu laufen beginnt wenn die Seite eigentlich schon geladen ist. Aber zumindest "optisch" macht es das was es soll.

Vielleicht hilft es ja trotzdem auf den richtigen Weg:

Javascript: 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
	ladeSeite();
});

function ladeSeite() {
    $("#inhalt").load("seiteXY.html", function() {
	    $("#balken").animate({width: "500px"}, 3000, function() {
	    	$("#balken").css("display", "none");
	    	$("#inhalt").css("display", "block");
		});
	});
}

</script>
HTML: 
<div id="balken" style="background-color: #00FF00; width: 0px;">&nbsp;</div>
<div id="inhalt" style="display: none;"></div>

Hiermit wird zuerst die gewünschte Seite in den DIV-Container "inhalt" geladen (hier "seiteXY.html") der aber noch nicht sichtbar ist.

Ist der Ladevorgang abgeschlossen wird die Animate-Funktion gestartet um den Ladebalken anzuzeigen (allerdings mit fester Laufzeit von 3 Sekunden).

Ist dieser Vorgang abgeschlossen, wird der Ladebalken aus- und die gelandene Seite eingeblendet.
 
Hallo tombe,

danke erst mal für Deine Hilfe! Ich führe hier jetzt mal die "Struktur" auf, vielleicht macht es das etwas anschaulicher:
Ich habe einen Link auf der index-Seite der lautet z.B. test.html, die Testseite (test.html) sieht folgendermaßen aus:
HTML: 
<!DOCTYPE html> 
<html>
<head> 
	<title>Test</title> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
	<link rel="stylesheet" href="css/style.css" />
	<script src="js/jquery-1.10.2.min.js"></script>
	<script src="js/jquery.mobile-1.3.2.min.js"></script>
    <script src="js/main.js"></script>
</head> 
<body>
<div data-role="page">
	<div data-role="header">
		<h1>Head</h1>
	</div><!-- /header -->
	<div data-role="content">	
		<script type="text/javascript">
  		  $(document).ready(function(){ladeXML('xml/test.xml');});
		</script>
    <div id="mediaContainer">
        <ul data-role="listview" data-inset="true" data-filter="true"></ul>
    </div>
	</div><!-- /content -->
<div data-role="footer">		
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
In der main.js - Datei ist das oben stehende Script (function ladeXML...)
Wo sollte denn sinnvollerweise das div für den Ladebalken hin, weil in der test.html wird der ja sicher immer erst angezeigt,
wenn auch die ganzen Inhalte da sind, oder? Oder sollte ich die test.html noch in eine andere Seite laden?
Eigentlich würde auch reichen einen "Ladespinner" so lange anzuzeigen bis alle Daten geladen sind
(also ohne Fortschrittsanzeige)... Würde soetwas mit "success" funktionieren? Sorry ich bin da wirklich noch etwas unbedarft und hangle mich von Problemchen zu Problemchen :rolleyes:

LG, Blaubär
 
Zuletzt bearbeitet:
Der Ladebalken, oder was auch immer, muss in diesem Fall in die "index.html" wo das Laden ausgelöst wird.

Du musst dann das Anklicken des Links "abfangen", den "Ladebalken" einblenden und dann die Datei laden.

Und falls du einfach "nur" eine Ladegrafik verwenden willst, dann schau mal auf die Seite von preloaders.net. Da gibt es jede Menge davon und man kann sie ganz nach seinen Wünschen anpassen!
 
Zuletzt bearbeitet:
Habe nun mal folgendes probiert:
In der index.html habe ich zum testen diese Funktion eingebaut:
HTML: 
<script type="text/javascript">
    	function loadIMG() {
        document.write('<img src="loading.gif" width="30px" height="30px" />');
}
</script>
Komischerweise funktioniert das nur direkt in der index, wenn ich das Script in die main.js auslagere
geht es garnicht...?
In der index habe ich nun diesen Link:
Code: 
<a href="test.html" onClick="loadIMG();">Test</a>
Das Ganze funktioniert relativ gut im Firefox, Chrom zeigt nichts an und öffnet irgendwann die fertige Seite,
Opera+IE zeigen nur noch das Ladebild - kein öffnen der eigentlichen Seite...
Was läuft denn da falsch?

Gruß, Blaubär
 
Javascript: 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
    $("a").click(function(e) {
        $("#balken").css("display", "block");
        ladeSeite();
        e.preventDefault();
    });
});

function ladeSeite() {
    $("#inhalt").load("tab.html", function() {
        $("#balken").css("display", "none");
        $("#inhalt").css("display", "block");
    });
}

</script>
HTML: 
<a href="seiteXY.html">Laden</a>
<div id="balken" style="display: none;"><img src="images/350.gif" width="200" height="200" style="border: 0px;" /></div>
<div id="inhalt" style="display: none;"></div>

Hier gibt es einen Link (wieder zur Seite "seiteXY.html"). Wird dieser angeklickt, wird das Click-Ereignis des Ankers aufgerufen. In der Funktion wird dann zuerst die Grafik eingeblendet und dann wiederum die nächste Funktion aufgerufen und die Seite zu laden. Das eigentliche Klick-Ereignis des Links wird mit e.preventDefault() abgebrochen.
 
Hallo tombe,

sorry das schnalle ich gerade noch nicht ganz, was sollte jetzt wo rein?
Wenn ich das Script in die index packe läd er irgendwie nicht - hängt, in der main.js passiert gar nichts,
wenn ich das mit in die test.html packen passiert auch nichts (welche Seite sollte er dort auch laden, außer "sich selbst")?
Ich hatte zwischen durch den Fall, das er ganz seltsam formatiert, den ersten Eintrag aus der XML angezeit hatte...?

Gruß, Blaubär
 
Ich habe mir jetzt nochmal den Beitrag von Anfang an durchgelesen und dabei bemerkt das ich vielleicht einen Schritt "unterschlagen" habe. Deshalb jetzt nochmal zurück auf Anfang.

Du hast die "index.html" und dort verschiedene Links.

Wird einer dieser Links angeklickt, so wird z.B. die "test.html" (in einem neuen Fenster) geladen und in dieser Datei ist dann die Funktion zum Laden der XML-Datei eingebaut (diesen Schritt habe ich bei meinem Beispielen nicht berücksichtigt).

In der "test.html" soll während des Ladens der XML-Datei das "Ladebild" angeizeigt werden.

Wenn das so stimmt, dann muss das "Ladebild" von Anfang an sichtbar in der "test.html" vorhanden sein. Der Bereich in den die XML-Datei geladen wird, muss per CSS auf "display: none" gesetzt sein.

Wird dann die "test.html" aufgerufen wird die Funktion zum Einlesen der XML-Datei aufgerufen. Am Ende dieser Funktion wird dann auch per CSS zuerst das "Ladebild" aus- und der Bereich mit der XML-Datei eingeblendet.

So müsste die "test.html" dann aussehen:

Javascript: 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">

$(document).ready(function() {
	ladeXML('xml/test.xml');
});

function ladeXML(datei) {
	$("#xml").load(datei, function() {
		$("#grafik").css("display", "none");
		$("#xml").css("display", "block");
	});
}

</script>

HTML: 
<img id="grafik" src="ladegrafik.gif" width="100" height="100" style="border: 0px;" />
<div id="xml" style="display: none;">In diesen Container wird die XML-Datei eingelsesn</div>

Je nachdem wie schnell die XML-Datei geladen wird, wird sie natürlich direkt angezeigt. Das ist vielleicht auch der Grund warum vom Ladevorgang selber nichts zu sehen ist.
 
Zuletzt bearbeitet:
Ich checke es irgendwie nicht!
Wenn ich die Scripte in den Header packe kommt nur das Ladebild, und
wenn ich die Scripte in den Body packe werden die Inhalte wohl geladen, aber nicht mehr im Listview angezeit. Also alles ein riesen Buchstabensalat...

Gruß, Blaubär
 
Schwer zu sagen woran es jetzt genau liegt.

Kannst du eventuell die index-, die test- und ein oder zwei XML-Dateien hier einstellen. Dann würde ich es damit mal direkt versuchen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück