tutorials.de Buch-Aktion 05/2012
RSS-Feed anzeigen

Stammtisch

[javascript]Seiteninhalt bei Bedarf automatisch nachladen

Bewerten
0 Kommentare
von Sven Mintel am 28.07.10 um 22:35 (1847 Hits)
Moin,

ihr kennt das vielleicht, Seiten die automatisch Inhalt nachladen, sobald man in die Nähe des unteren Seitenrandes scrollt.

Wie das geht, wurde hier angefragt: http://www.tutorials.de/javascript-a...ich-laden.html

Hier eine ganz simple Umsetzung per jQuery:

Code :
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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
                                charset=ISO-8859-1"   />
<meta name="author"             content="doktormolle" />
<meta name="date"               content="2010-07-28" />
<title>Test</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
 
<script type="text/javascript">
<!--
var i=0;
$(window).load(
function()
{
  $(window).scroll(function()
                {
                  var margin=30;
                  if((($('body').scrollTop()+margin+$(window).height())-$(document).height())>0)
                  {
                    //hier müsstest du per AJAX nachladen
                    $('body').append('<br/>Nachladung#'+(i++));
                  }
                });
}
);
//-->
</script>
</head>
<body>
<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-
<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-
<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-<br/>-
</body>
</html>

Es wird der scroll-Event überwacht, und dabei ermittelt, wie weit gescrollt wurde, und ob unten neuer Inhalt benötigt wird...das wars eigentlich schon










.

"[javascript]Seiteninhalt bei Bedarf automatisch nachladen" bei Twitter speichern "[javascript]Seiteninhalt bei Bedarf automatisch nachladen" bei Facebook speichern

Stichworte: ajax, content, javascript, jquery, load
Kategorien
‎ Schnipp-Schnapp:Copy&Paste , ‎ Javascript

Kommentare