Problem mit load-content bei scroll-event

[rusty83]

Hallo!

Ich habe mir ein "infinityscroll-script" runtergeladen dass weitere Inhalte beim scrollen ausgibt.
Das script läuft soweit sehr gut jedoch hab ich das Problem dass wenn ich z.b. auf einen Link von so einem Inhalt klicke und von der neu geladenen Seite wieder auf den "zurück-button" vom Browser klicke die Inhalte falsch geladen werden.

Es hat den anschein als würde die letzte scrollposition gespeichert und beim zurückgehen wird das script falsch ausgeführt da der scrollbalken schon ein stück weiter unten ist.

Gibt's dazu einen Trick wie ich das verhindern kann? hier der code vom javascript.

$(document).ready(function() {
	start = 0;
	count = 1;
	for (var i = 0; i < 2; i++){
		loadcontent();	
	}
});	

function loadcontent() {
	$.ajax({
		type: 'get',
		url: 'content.php',
		async: false,
		data: { start : start, count : count },
		success: function (html){
			if(html){
				$('.container').append(html);
				start = start + 1;
			}else{
				$('.end').html('<p>Keine weiteren Posts!</p>');
			}
		}
	})	
}

$(window).scroll(function(){
	if ($(window).scrollTop() == $(document).height() - $(window).height()){		
			loadcontent();			
	}
});

Besten Dank schonmal im Voraus!

mfg

 

[mikdoe]

Hast du das in mehreren Browsern getestet? Ist das bei allen so?

 

[rusty83]

Hallo - erstmal Danke für die schnelle Antwort!
ja das Problem ist bei Firefox / Opera und IE.

Aber beim testen gerade habe ich folgendes herausgefunden:
Ich habe die page mit webplus x6 erstellt - im html code der Seite wird folgende script verwendet: jquery.timers.js

wenn ich diese zeile rausnehme funktioniert das ganze --> beim verlassen der Seite und wieder über zurück-button wird sofort an die letztbekannte Stelle gesprungen OHNE alles wieder neu nachzuladen - perfekt!
Jedoch funktioniert daurch mein Slider nicht mehr - es wird nur mehr das erste Bild angezeigt - da jetzt wahrscheinlich der "jquery.timer" fehlt.

Hat da jemand nen guten Tip für mich?

Danke!

 

[mikdoe]

Kann man sich das Verhalten irgendwo online anschauen?

 

[rusty83]

Klar hier ist der Link zur Testseite von mir:
index6

wenn du z.b. in der index6.html die zeile mit dem timer löscht funktioniert der Slider oben nicht mehr aber dafür der rest.

Danke schonmal!

 

[dbarthel]

Aus eigener Erfahrung mit dem Thema scrollen, kann ich sagen, viele Browser setzen die Scrolls beim neuladen nicht zurück.
Du musst alle Scrolls auf (0,0) zurücksetzen.

$.scrollTo( 0 );

 

[rusty83]

Danke für die Info!
also diesen Befehl einfach am Start der JS-Datei?

Eigentlich funktioniert ja der scrollevent spitze - auch beim klick auf "eine Seite zurück" jedoch sobald die Zeile mit jquery.timers.js in der html steht wird immer geladen.

ach ja das Beispiel kann man sich auf dieser Testseite ansehen:
http://stoneface-archery.at/index6.html

scrolltman runter bis z.b. auf Eintrag 2 und klickt auf das bild (kommt man zur Galerie) und man geht zurück läuft irgendetwas schief.
löscht man jedoch in der HTML-Datei die Zeile mit "jquery.timers.js" funktioniert das einwandfrei - jedoch der Slider ganz oben nicht mehr.

 

[dbarthel]

also diesen Befehl einfach am Start der JS-Datei?

ja.

jedoch sobald die Zeile mit jquery.timers.js in der html steht wird immer geladen.

könnte sein, das sich die scripte gegenseitig behindern.

löscht man jedoch in der HTML-Datei die Zeile mit "jquery.timers.js" funktioniert das einwandfrei - jedoch der Slider ganz oben nicht mehr.

ich würde da den Slider in ein extra-Html tun und dieses dann als iframe laden.
Auf diese Weise kannst du die "jquery.timers.js" für den Slider weiter nutzen, indem du sie nur dort lädst und im restlichen Dokument rausnehmen.

 

[rusty83]

Hey Danke für die Info!

Ich mach ja eigentlich das meiste in der Software webplus X6 --> da kann man mit Masterseiten arbeiten die praktisch hinter jeder Seite liegt.
D.h. einfach den slider auf eine "nackte" Seite platzieren und diese Seite dan auf der Masterseite als iframe einbinden - verstehe ich das so richtig?
und dan behindern sich die beiden scripte nicht mehr?
Würd den Slider nämlich doch gern direkt von der Software erstellen.

Wäre kein allzu großer Aufwand muss ich testen.

Danke!

 

[mikdoe]

Achtung, Beitrag #5 gerade eben erst freigegeben!

 

[dbarthel]

@rusty83: mit Webplus x6 habe ich keine Erfahrung. Keine Ahnung, wie es da genau geht. Musst du halt probieren.

 

[rusty83]

@dbarthel:
Ich hab das mit dem Banner in Iframe einbinden geteset -> der Banner funktioniert und die Timer.js wird nicht dazu benötigt jedoch funktioniert das scrollen beim "zurück gehen" trotzdem nicht.

Ich hab die "Grund-HTML" wo wirklich nur das nötigste drin steht damit die scrollfunktion ausgeführt wird getestet --> bei meinem Laptop funktionierts, auf meinem Standrechner auch nicht --> also es liegt wahrscheinlich wirklich am scroll-script selbst bzw. browserversion (siehe erster post).

Das eigentliche Problem liegt daran, dass wenn ich runterscrolle und weitere Beiträge geladen werden - ich dan auf eine andere Seite wechsle und wieder mit zurück-button auf die Hauptseite gehe die scrollfunktion "macht was es will" da der scrollbalken von oben zur letzgemerkten stelle SCROLLT.

Entweder man muss was am script ändern damit das ganze neu zu berechnen beginnt oder beim zurückgehen das fenster nicht wieder von oben beginnt sondern sofort an die Stelle stellt wo verlassen wurde.

Hab noch überlegt dass beim "zurückgehen" das laden der Beiträge nicht nachkommt und daher der zähler falsch rechnet?

Weis nicht mehr was ich noch testen könnte - bin über jeden Tip/Hilfe Dankbar.

mfg

 

[mikdoe]

Also ich bin nicht sicher, ob man das exakte Verhalten der Back-Taste im Browser irgendwie beeinflussen kann. Hast du es mal versucht, indem du bei jedem Scrollen die Position in einem Cookie oder localStorage speicherst und beim Neuladen der Seite nachschaust, ob gespeicherte letzte Position da ist, sonst scrollen? Nur mal als Versuch, ob man das später so übernimmt ist ja nochmal eine andere Frage.

 

[rusty83]

Puh danke für den Tip aber da kenn ich mich leider etwas zu wenig aus.

vielleicht gibt es ja was das egal ob die Seite neu aufgerufen wird oder "zurückgegangen" wird die seite von ganz oben beginnt - und dan eben (falls die scrollposition gemerkt wurde) jeder bis dahin zu ladende Inhalt eben nachgeladen wird (so wie jetzt) NUR dass ein neuer Beitrag erst nachgeladen wird wenn der vorherige vollständige geladen wurde?

Denke mittlerweile wirklich dass das laden der beiträge nciht nachkommt, da ich direkt HTML-Seiten reinlade.

 

[mikdoe]

da kenn ich mich leider etwas zu wenig aus.

Du, es gibt derzeit kaum was einfacheres in JS als localStorage: http://forum.jswelt.de/tutorials-javascript/59118-localstorage-paar-beispiele.html

vielleicht gibt es ja was das egal ob die Seite neu aufgerufen wird oder "zurückgegangen" wird die seite von ganz oben beginnt

Das solltest du mit dem onload Event selbst vollkommen steuern können.

und dan eben (falls die scrollposition gemerkt wurde) jeder bis dahin zu ladende Inhalt eben nachgeladen wird

Ja, und hierfür musst du aber selbst dafür sorgen, dass die Position "gemerkt" wird. Auf des Browsers interne Merktabellen kannst du beim blättern nicht zugreifen soweit ich weiß.

(so wie jetzt) NUR dass ein neuer Beitrag erst nachgeladen wird wenn der vorherige vollständige geladen wurde?

Das wäre doch ganz einfach zu machen, indem jeder Beitrag auf den vorherigen wartet und nicht alle gleichzeitig los laufen. Alle zu ladenden Beiträge in ein Array schieben und dann einfach die Funktion immer nur für einen Beitrag schreiben und im success Fall sich selbst aufrufen, wenn im Array noch was offen ist.

Denke mittlerweile wirklich dass das laden der beiträge nciht nachkommt, da ich direkt HTML-Seiten reinlade.

Was lässt dich das denken? Anhaltspunkte?

 

[rusty83]

Viel Info Danke - da werd ich mich mal einige Stunden dazusitzen müssen um das ganze umzusezten (bin noch ein ziemlicher Frischling was das anbelangt).

Was mich das denken lässt? - mir fällt nichts anderes mehr dazu ein.

Ich hab auch noch versucht mir bei jedem laden eines Beitrags die "start-variable" vom script abzeigen zu lassen:
Beim ersten Besuch der Seite: funktioneirt einwandfrei, zähler zählt wie er soll.
Beim "zurückgehen" wird gleich bei einer falschen startposition angefangen und dan kommt immer der selbe wert - das versteh ich noch nicht und daran wird wahrscheinlich leigen nur weis ich nciht warum.

Das wäre doch ganz einfach zu machen, indem jeder Beitrag auf den vorherigen wartet und nicht alle gleichzeitig los laufen. Alle zu ladenden Beiträge in ein Array schieben und dann einfach die Funktion immer nur für einen Beitrag schreiben und im success Fall sich selbst aufrufen, wenn im Array noch was offen ist.

genau das macht das script - im php-script werden alle Beiträge in einen array gespeichert und mittels einer while schleife abgerufen - beim scrollen wird der succcess Befehl ausgeführt und dan der nächste Beitrag übergeben (mittels zählervariabel = start & count).

Danke nochmal!

 

[mikdoe]

Vorsicht!! Ich meine ein Array in JS, nicht in PHP. PHP ist ja die Serverseite. Das da eine Schleife läuft ist schon klar. JS ist die Browserseite, da meinte ich die Schleife. Damit immer nur ein Request pro Beitrag an das PHP läuft und nicht einer, der dann einen riesen Batzen als HTML Seite bekommt.
Ganz wichtig für dich: Client-Server Prinzip! Bitte unbedingt anlesen.

 

[rusty83]

OK jetzt hab ich's verstanden --> klingt logisch für mich, das könnte wirklich der Grund sein, dass der riesen "Batzen" auf einmal kommt und nicht richtig geladen wird mittels Zähler - werde ich testen!

Hast du zufällig dazu einen guten Link zwecks JS und array?

Danke.

 

[j-l-n]

Hast du zufällig dazu einen guten Link zwecks JS und array?

Array - JavaScript | MDN

Ist jetzt die Frage, ob du ein "echtes" Array meinst (z.B. var arr = [1, 2, 3]; oder wie in PHP oft verwendet ein assoziatives Array/Objekt:

var arrayObject = {};
arrayObject["name1"] = "value1";
arrayObject["name2"] = "value2";
arrayObject["name3"] = "value3";

PS: als Anfänger ist es besser, wenn du Arrays statt mit dem new Array()-Konstruktor in Literalschreibweise ([]) deklarierst, um Fehler zu vermeiden.

 

[mikdoe]

Das mit dem Array war nur symbolisch für eine Warteschlange gemeint. Klar kann man auch ein echtes syntaktisches Array verwenden. Muss man aber nicht. Man kann auch über das DOM iterieren und sich dort die noch zu ladenden Beiträge her holen und dann immer pro viewport einen Request machen anstatt pro Beitrag. Gibt da viele Möglichkeiten.
Ob das allerdings die Ursprungsfrage löst bezweifle ich. Ich hatte die Warteschlange nur rein gebracht, weil rusty in Beitrag #14 meinte, es könnte an der großen Datenmenge liegen. Daher der Vorschlag, kleinere Häppchen daraus zu machen.
Eine Scrollposition ist eigentlich unabhängig davon, wie man den Content einer Seite strukturell abholt und zusammen setzt. Bis auf die große Unbekannte, das Browserverhalten bei Nutzung der Vor-/Zurück Buttons. Aber diese Unbekannte bleibt sowieso bestehen.