Mit Ajax a href Seiten vorladen

ladyray · 13.02.2012

Hallöchen und guten Abend,

ich suche seit längerer Zeit einen Ajax- oder jQuery-Preloader, doch leider fand ich kein Ergebnis, das meinen Vorstellungen ähnelte.
Ich möchte keine Webseiten auf der Seite direkt vorladen, sprich ich möchte nicht eine Seite im Browser abrufen und dann warten, sondern mein Preloader soll sich nur auf a href-Links beziehen. Wenn ich einen Link in einem HTML-Code einbinde, soll eine Funktion auf Klick angesprochen werden, die die Seite vorlädt (während dem Vorladen wird einfach eine transparente Box auf die Seite gelegt, auf der ein Text oder Bild erscheint, das ist aber hierfür weniger relevant) und anschließend auf die gewünschte Seite weiterleitet.
Nun bin ich dabei wie bereits erwähnt noch auf keine Lösungen oder Fragen diesbezüglich gestoßen und hoffe nun auf eure Hilfe.
Hat jemand dafür Ideen?

Schöne Grüße

Duddle · 13.02.2012

AW: Mit Ajax a href Seiten vorladen

Beim Klick auf den Link soll die Seite vorgeladen werden? Welchen Vorteil hätte das?

Die Seite wäre definitiv nicht schneller da, denn sie kann frühestens dem Nutzer angezeigt werden sobald sie geladen ist. Ob du dem Nutzer derweil eine leere Seite präsentierst oder er den Aufbau nachvollziehen kann, ändert nichts an der eigentlichen Geschwindigkeit. Auch wäre ich als Nutzer unzufriedener mit ersterer Lösung, denn ich würde für eine kurze Zeit nicht wissen ob die Seite nun erfolgreich laden würde. Stell dir einen Ladebalken vor, der 5 Minuten bei 0% bleibt und dann auf 100% springt kontra einem Ladebalken, der aller 3 Sekunden um 1% weitergeht.

Zweitens laden einige Browser sowieso schon Links, während du auf der Seite bist. Insofern würde dein eigener Mechanismus keinen Vorteil bringen.

Duddle

ladyray · 13.02.2012

AW: Mit Ajax a href Seiten vorladen

Duddle schrieb:
Beim Klick auf den Link soll die Seite vorgeladen werden? Welchen Vorteil hätte das?

Die Seite wäre definitiv nicht schneller da, denn sie kann frühestens dem Nutzer angezeigt werden sobald sie geladen ist. Ob du dem Nutzer derweil eine leere Seite präsentierst oder er den Aufbau nachvollziehen kann, ändert nichts an der eigentlichen Geschwindigkeit. Auch wäre ich als Nutzer unzufriedener mit ersterer Lösung, denn ich würde für eine kurze Zeit nicht wissen ob die Seite nun erfolgreich laden würde. Stell dir einen Ladebalken vor, der 5 Minuten bei 0% bleibt und dann auf 100% springt kontra einem Ladebalken, der aller 3 Sekunden um 1% weitergeht.

Zweitens laden einige Browser sowieso schon Links, während du auf der Seite bist. Insofern würde dein eigener Mechanismus keinen Vorteil bringen.

Duddle

Danke für deine Stellungnahme, dennoch würde ich gerne mein Anliegen verwirklichen und mich über Ideen oder Lösungen zu diesem Thema freuen.

ladyray · 14.02.2012

AW: Mit Ajax a href Seiten vorladen

does nobody knows a answer?

mindraper · 14.02.2012

AW: Mit Ajax a href Seiten vorladen

hi.

zunächst: ich habe noch NIE einen link gesehen, der nicht als <a>-tag mit href-attribute gecoded war. wenn du ein beispiel hast, dann bitte her damit.

zur sache:

mal angenommen, du würdest einen preloader bauen, der eine seite vorlädt. damit wäre für dich so ungefähr gar nichts gewonnen.

1.)
der reine code einer page hat i. d. R. < als 30kb. und das ist schon relativ viel. das vorladen der seite würde also warscheinlich ( abhängig davon, wie stark der prozessor des users ist und welche verbindung er hat ( 56k, 128k, DSL, usw.) ) < 1 sekunde dauern.

vielleicht 2 sekunden, wenn der user mit einem 386er surft. das dürften aber die wenigsten sein.

2.)
selbst wenn du also die seite vorlädst, sie nach beenden des ladens anzeigst, hättest du damit nichts erreicht. denn das, was "soooo lange" dauert, ist das parsen und nachladen von seiteninhalten, sprich: bilder, plugins, social-media-facebook-sch***-drauf-like-buttons, etc.

und das passiert nicht beim laden der seite, sondern sobald die seite geladen ist. erst dann beginnt der browser, den inhalt zu parsen und die darin angegebenen ressourcen zu laden.

im endeffekt sieht der user ein kurzes flackern, und dann wird die neue seite geparst. ich nehme an, du hättest gerne einen effekt wie er teilweise in flash realisiert ist. dem spricht entgegen, dass ein browser einerseites keine zeitleiste hat auf der neue inhalte "plaziert" werden können und ein laden vorgetäuscht, andererseits ein neu geladenes flashvideo incl. aller darin enthaltenen inhalte eine einzelne datei ist im gegensatz zur "normalen" website. diese besteht aus mehreren einzeldateien:

- der page selbst. also HTML.
- etwaige bilder.
- iframes und consorten, die i. d. R. inhalte von fremden websites anzeigen.
- plugins, sonstiges.

ob es da eine lösung gibt möchte ich momentan bezweifeln.

ladyray · 14.02.2012

AW: Mit Ajax a href Seiten vorladen

mindraper schrieb:
hi.

zunächst: ich habe noch NIE einen link gesehen, der nicht als <a>-tag mit href-attribute gecoded war. wenn du ein beispiel hast, dann bitte her damit.

zur sache:

mal angenommen, du würdest einen preloader bauen, der eine seite vorlädt. damit wäre für dich so ungefähr gar nichts gewonnen.

1.)
der reine code einer page hat i. d. R. < als 30kb. und das ist schon relativ viel. das vorladen der seite würde also warscheinlich ( abhängig davon, wie stark der prozessor des users ist und welche verbindung er hat ( 56k, 128k, DSL, usw.) ) < 1 sekunde dauern.

vielleicht 2 sekunden, wenn der user mit einem 386er surft. das dürften aber die wenigsten sein.

2.)
selbst wenn du also die seite vorlädst, sie nach beenden des ladens anzeigst, hättest du damit nichts erreicht. denn das, was "soooo lange" dauert, ist das parsen und nachladen von seiteninhalten, sprich: bilder, plugins, social-media-facebook-sch***-drauf-like-buttons, etc.

und das passiert nicht beim laden der seite, sondern sobald die seite geladen ist. erst dann beginnt der browser, den inhalt zu parsen und die darin angegebenen ressourcen zu laden.

im endeffekt sieht der user ein kurzes flackern, und dann wird die neue seite geparst. ich nehme an, du hättest gerne einen effekt wie er teilweise in flash realisiert ist. dem spricht entgegen, dass ein browser einerseites keine zeitleiste hat auf der neue inhalte "plaziert" werden können und ein laden vorgetäuscht, andererseits ein neu geladenes flashvideo incl. aller darin enthaltenen inhalte eine einzelne datei ist im gegensatz zur "normalen" website. diese besteht aus mehreren einzeldateien:

- der page selbst. also HTML.
- etwaige bilder.
- iframes und consorten, die i. d. R. inhalte von fremden websites anzeigen.
- plugins, sonstiges.

ob es da eine lösung gibt möchte ich momentan bezweifeln.

Ich bedanke mich nochmal, doch wiederhole ich gerne was ich gestern schon erwähnte: Ich bin nicht auf der Suche nach Meinungen zu diesem Thema, sondern nach Ideen und Lösungen für die Umsetzung!

Einen schönen Abend

mindraper · 15.02.2012

AW: Mit Ajax a href Seiten vorladen

siehe meinen letzten satz

Duddle · 15.02.2012

AW: Mit Ajax a href Seiten vorladen

HTML:

<!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>ladyray test</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" language="javascript" charset="utf-8">
		    $(document).ready(function() {
			$("a").click(function() {
			    url = $(this).attr("href");
			    $("#ifr").attr("src", url);
			    window.setTimeout("document.location.href='"+url+"'", 10000);
			    return false;
			});
		    });
		</script>
	</head>

	<body>
	    <a href="http://www.google.de">Link</a>
	    <a href="http://www.web.de">Link</a>
	    <iframe id="ifr" width="5" height="5" src=""></iframe>
	</body>
</html>

Mit AJAX ging es nicht, das verhindert die Same-Origin-Policy. Mithilfe des iframes wird die Seite vorgeladen, aber offensichtlich kannst du dann nicht erkennen wann sie fertig ist.

Den restlichen Schnickschnack (Overlay, etc.) kannst du sicher selbst einbauen.

Duddle

ladyray · 15.02.2012

AW: Mit Ajax a href Seiten vorladen

Duddle schrieb:

HTML:

<!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>ladyray test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" language="javascript" charset="utf-8">
            $(document).ready(function() {
            $("a").click(function() {
                url = $(this).attr("href");
                $("#ifr").attr("src", url);
                window.setTimeout("document.location.href='"+url+"'", 10000);
                return false;
            });
            });
        </script>
    </head>

    <body>
        <a href="http://www.google.de">Link</a>
        <a href="http://www.web.de">Link</a>
        <iframe id="ifr" width="5" height="5" src=""></iframe>
    </body>
</html>

Mit AJAX ging es nicht, das verhindert die Same-Origin-Policy. Mithilfe des iframes wird die Seite vorgeladen, aber offensichtlich kannst du dann nicht erkennen wann sie fertig ist.

Den restlichen Schnickschnack (Overlay, etc.) kannst du sicher selbst einbauen.

Duddle

Danke

Das hilft mir auf jeden Fall weiter. Der iFrame wird also mit deinem jQuery Script mit dem Inhalt der URL beladen, die im Link verwendet wird. Schade, dass man nicht verfolgen kann, wann die Seite geladen wurde. Weil eine slepp-Funktion ist da nicht das angebrachte. Aber ich werde mal gucken, vielleicht finde ich irgendwo im World Wide Web noch ein Script, das das herausliest

Liebe Grüße und danke

Duddle · 15.02.2012

AW: Mit Ajax a href Seiten vorladen

Scheinbar triggert ein Laden eines iframes doch einen Event, wieder was gelernt:

HTML:

$(document).ready(function() {
    $("a").click(function() {
	url = $(this).attr("href");
	$("#ifr").attr("src", url);
	$("#ifr").load(function (){
	    document.location.href=url;
	});
	return false;
    });
});

Duddle

mindraper · 15.02.2012

AW: Mit Ajax a href Seiten vorladen

hi.

sorry, aber das ist ja wohl kein preloader – es funktioniert nur, weil der browser die seite cached! mit deaktiviertem cache wird nämlich zuerst die angegebene url im iframe geladen, dann die url aufgerufen und der inhalt wieder geladen. wo ist da der sinn??

verlinke doch mal auf ein großes bild, um das ganze zu testen und schalt den cache aus. dann siehst du was ich meine. bzw. falls du grad kein bild hast:

gruß

Duddle · 16.02.2012

AW: Mit Ajax a href Seiten vorladen

Jap.

mindraper schrieb:
wo ist da der sinn??

Nicht existent.

Es erfüllt also genau die Anforderungen vom Threadstarter

Duddle

ladyray · 16.02.2012

AW: Mit Ajax a href Seiten vorladen

mindraper schrieb:
hi.

sorry, aber das ist ja wohl kein preloader – es funktioniert nur, weil der browser die seite cached! mit deaktiviertem cache wird nämlich zuerst die angegebene url im iframe geladen, dann die url aufgerufen und der inhalt wieder geladen. wo ist da der sinn??

verlinke doch mal auf ein großes bild, um das ganze zu testen und schalt den cache aus. dann siehst du was ich meine. bzw. falls du grad kein bild hast:

gruß

Die Seite wird zwar nach dem Laden im iFrame geladen, doch wird auf die gecachten Inhalte zugegriffen und somit wird der Context nicht erneut geladen.
Aber ich gebe dir gerne die Möglichkeit, eine andere Variante vorzulegen!?

Liebe Grüße

Myhar · 16.02.2012

AW: Mit Ajax a href Seiten vorladen

Die Lösung mit iFrame ist wohl das, was deiner Anforderung am nächsten kommt. Oder ich habe dich hier falsch verstanden.
Ich sehe es so wie Duddle, du möchtest etwas, was keinen Sinn ergibt.
Kannst du dein Anliegen vielleicht erneut und zwar aus Sicht des Users beschreiben?
Also nach dem Prinzip: Ich bin ein User auf deiner Internetseite und möchte, dass im Hintergrund die Seiten neu geladen werden, damit diese nach einem Klick auf einen Link schneller geladen sind?

ladyray · 16.02.2012

AW: Mit Ajax a href Seiten vorladen

Myhar schrieb:
Die Lösung mit iFrame ist wohl das, was deiner Anforderung am nächsten kommt. Oder ich habe dich hier falsch verstanden.
Ich sehe es so wie Duddle, du möchtest etwas, was keinen Sinn ergibt.
Kannst du dein Anliegen vielleicht erneut und zwar aus Sicht des Users beschreiben?
Also nach dem Prinzip: Ich bin ein User auf deiner Internetseite und möchte, dass im Hintergrund die Seiten neu geladen werden, damit diese nach einem Klick auf einen Link schneller geladen sind?

Im Grunde geht es darum, dem Benutzer das Warten zu verschönern. Bei großen Bildern und vielen MySQL-Abfragen, kann das Warten schon mal ein paar Sekunden dauern.
Mittlerweile habe ich jedoch eingesehen, dass das Laden des Inhalts in einen iFrame nicht das ist, was ich mir als Lösung vorstelle, denn nehmen wir einmal an, jemand ruft die Seite direkt, ohne Link im Browser auf, dann ist das ganze "pseudo Preload" auf deutsch, für´n *****. Deshalb bastle ich gerade an einer Option im Content erst ein Laden-Bild erscheinen zu lassen und nach erfolgreichem Laden, wird der eigendliche Inhalt angezeigt.

Code:

        $(document).ready(function() {
            $('#content').html('<img src="loader.gif">');
            $('#content').load('/ #content', function() {
                $("#content").css('display', 'none');
                $('#content').fadeIn(2000);
            });
        });

Das ergibt in meinem Code keinen Sinn, da ich den Content oben als das Bild initialisiere, ausblende und wieder einblende. Deshalb überlegte ich, den Inhalt des Contents, erst in eine Variable zu speichern und dann zu sagen, dass der Content das Bild sein soll. Nachdem der Inhalt dann geladen ist, wird der Content wieder auf den in der Variable gespeicherten Wert zurückgesetzt.
Ich denke, es ist nachvollziehbar was ich meine.

An dieser Variante möchte ich festhalten. Das ist benutzerfreundlich, ob es jedoch SEO-freundlich ist, bezweifle ich.

mindraper · 17.02.2012

AW: Mit Ajax a href Seiten vorladen

hi.

die lösung lautet ajax. aber nur dann, wenn du den neuen inhalt via php o. xml oder sonstwas holen willst. und das nachträgliche laden der bilder wirst du nicht verhindern können. ganz egal, wie du die neue page lädst. warum das so ist, habe ich in meinem ersten post denke ich ziemlich plausibel erklärt.

die lösung wäre ca. so:

1.)
bei einem userevent wird eine anfrage an den server geschickt bzw. als ziel eine php datei aufgerufen ( via ajax ).
2.)
quasi "zeitgleich" wird ein bild eingeblendet, das so lange bestehen bleibt, bis die antwort vom server angekommen ist. soll heißen: bis das php eine ausgabe wirft.
3.)
sobald php eine ausgabe macht ( via echo z.b. ) wird das bild ausgeblendet und die php ausgabe in die page eingefügt.

wenn das deinen vorstellungen entspricht, dann lass dir gesagt sein: es geht – bis auf laden der bilder. die werden nämlich trotzdem erst geladen, sobald sie via <img>-tag im quellcode stehen. es sei denn, du erzeugst in js neue bilder mit new Image(). aber das wird warsch. nicht funktionieren, weil du ja erst die bildpfade kennst, nachdem php sich ausgekotzt hat.

zum schluss möchte ich gerne bemerken, dass ich definitiv nicht nachvollziehen kann, was du meinst. sorry. ob ich mir als user nun 1 minute lang den aufbau der seite anschaue oder 1 minute lang ein bild ist mir ehrlich gesagt vollkommen wurscht.

KireSchattenhaar · 20.02.2012

AW: Mit Ajax a href Seiten vorladen

Hey, Dein WUnsch ist eigentlich ziemlich simpel zu realisieren.
Check mal die jQuery-Doku zum Thema load. Du kannst eine Funktion angeben, die ausgeführt werden soll, wenn der Inhalt fertig geladen wurde. So ich will Dir jetzt keinen Code posten, sollst ja auch was lernen, aber ich geb Dir Tipps.

Definiere 2 Div2 übern ganzen Browser (ein "großes" und darin noch eines, das "große" bekommt via css display:none), da drin lädst Du Deinen Kram rein.Bei einem Klick auf einen Link (per Selector auslesen) wird in das "große" ein anderer Stylesheet vergeben, das ist Dein "Wartefenster". Via jQ liest Du den Link heraus und lädst diesen dann über die Load-Funktion. Anschließend wird das "Wartefenster" vie CSS wieder auf display:none gesetzt, das kann man auch sehr schön ausblenden lassen.

Versuchs mal, such Dir zu den einzelnen Funktionen ein paar Tutorials und dann klappt das auch^^

mindraper · 20.02.2012

AW: Mit Ajax a href Seiten vorladen

hi.

jQuery's load()-methode basiert auf ajax... steht auch in den docs drinne. es bestünde also ( fast ) kein unterschied zu $.ajax() oder $.get().

und nebenbei: das ist exakt das, was ich oben schon gesagt habe. nur noch mehr auf jQuery gemünzt. soll heißen, es treten die gleichen probleme auf wie vorher auch, ob mit oder ohne .load().