[Übersicht]
Tutorials > Javascript > Beim Scrollen nachladen ≡ 

  PHP Basics
   • Administrationsbereich
   • Counter
   • Umfrage
   • Kalender
   • Kontaktformular
  Javascript
   • WebAudio Player
   • WebAudio Player Singles
   • Web-Farbmixer
   • Beim Scrollen nachladen
     Canvas
      • Weihnachtskalender
      • BCD Uhr
      • Analog Anzeigeinstrument
      • Drehregler
      • Schieberegler
      • Schiebeschalter
     Navigation
      • Registerkarten-Navigation
      • Rotationsmenue
     Animation & Spiele
      • Warp-Flug
      • Lichtjockey
  HTML
   • HTML 5 Grundgerüst
  CSS
   • Responsive Tabelle






php



webhostingbanner 250x250


[Beispiel]   [Download]  

Es gibt bestimmt zahlreiche Beispiele für das Nachladen von Daten ans Ende der Seite.
In diesem hier habe ich mich dafür entschieden, alle 3 unterschiedlichen erforderlichen Daten von Anfang an in Javascript-Variable zu schreiben. Das sind der Titel, der Link und der Name der Bilddatei.

In die anfangs leere Tabelle werden ab einer gewissen Scrollhöhe jeweils 3 neue Zeilen erzeugt.
Die Anzahl der Spalten ist dabei beliebig. Hier sind es nur 2 um etwas an Höhe zu generieren.

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
<table id="nDemoTable" style="width: 100%; border-spacing: 0px;" border="1"></table>
 
<script language="javascript">
 
// Konfiguration
// =============
 
var nDemoCols       = 2;	// Anzahl der Spalten
var nDemoStartRows  = 5;	// Anzahl der Startzeilen
var nDemoSrollRows  = 3;	// Anzahl der neuen Zeilen pro Nachladung
var nDemoSrollEnd   = 100;	// Pixel zum Seitenende ab denen nachgeladen wird
 
// ====================================================================================
 
var nDemoTitel      =  new Array();
    nDemoTitel[0]   = 'Hausmeisterdienst Krispin';
    nDemoTitel[1]   = 'DerPottDj';
    nDemoTitel[2]   = 'Hundetrainerin.de';
    usw...
 
var nDemoLinks      =  new Array();
    nDemoLinks[0]   = 'Referenzen-27';
    nDemoLinks[1]   = 'Referenzen-26';
    nDemoLinks[2]   = 'Referenzen-25';
    usw...
 
var nDemoBilder     =  new Array();
    nDemoBilder[0]  = 'ref_hmdo.png';
    nDemoBilder[1]  = 'ref_pottdj.jpg';
    nDemoBilder[2]  = 'ref_ht.jpg';
    usw...

Nun brauchen wir eine Funktion, welche aus den Daten neue Zeilen für die Tabelle erzeugt.
Diese wird nach dem Laden der Seite für "nDemoStartRows" mal aufgerufen:

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
document.onload = window.setTimeout("nDemoInit()", 250);
 
var nDemoUseTable;
var nDemoRows = 0;
 
function nDemoInit()
{
	nDemoUseTable = document.getElementById('nDemoTable');
 
	for( sr = 0; sr < nDemoStartRows; sr++ )
	{
		nDemoTableAddRow();
	}
}
 
function nDemoTableAddRow()
{
	// Zellenbreite gleichmäßig aufteilen
	nDemoCellWidth = Math.ceil( 100 / nDemoCols );
 
	// Wenn noch ausreichend Bilder in den Variablen übrig sind
	if( nDemoRows < Math.ceil( nDemoBilder.length / nDemoCols ) )
	{
		// Neue Zeile erzeugen
		newRow = nDemoUseTable.insertRow();
 
		// "nDemoCols" Neue Zellen erzeugen
		for( nc = 0; nc < nDemoCols; nc++ )
		{
			newCell  = newRow.insertCell(nc);
			newCell.setAttribute('style', 'text-align: center; width: '+nDemoCellWidth+'%; height: auto; padding: 5px;');
			newImage = ( nDemoRows * nDemoCols ) + nc;
 
			if( nDemoBilder.length > newImage )
			{
				// Den HTML-Code für die verlinkten Bilder zusammensetzen und in die neue Zellen laden
				newCell.innerHTML = '<a href="'+nDemoLinks[newImage]+'"><img src="images/referenzen_gross/'+nDemoBilder[newImage]+'" border="0" title="'+nDemoTitel[newImage]+'" style="max-width: 100%; height: auto;"></a>';
			} else
			  {
				// Restliche Zellen werden nur mit einem Leezeichen beschrieben
				newCell.innerHTML = '&nbsp;';
			  }
		}
 
		nDemoRows++;
	}
}

Zuletzt sorgt der Eventlistener dafür, das jeweils "nDemoSrollRows" weitere Zeilen ans Ende der Tabelle angehängt werden.
Zur Ermittlung der Höhe wird von der gesamten Seitenhöhe der sictbare Bereich sowie die Vorgabe "nDemoSrollEnd" abgezogen.

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
document.addEventListener("scroll", nDemoResize, true);
 
function nDemoResize()
{
	nDemoScrollHeight = window.pageYOffset;
	nDemoWindowHeight = window.innerHeight;
	nDemoTableTop     = nDemoUseTable.offsetTop;
	nDemoTableHeight  = nDemoUseTable.offsetHeight;
	nDemoSiteHeight   = document.getElementById('site').offsetHeight;
 
	// Wenn die Seite bis auf "nDemoSrollEnd" (hier 100 Pixel) nach ganz unten gescrollt wurde
	if( nDemoScrollHeight > ( nDemoSiteHeight - nDemoWindowHeight - nDemoSrollEnd ) )
	{
		for( sr = 0; sr < nDemoSrollRows; sr++ )
		{
			nDemoTableAddRow();
		}
	}
}