[Ü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.










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:










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.










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();
}
}
}