Inhalt einer Seite nur im sichtbaren Bereich laden

Fabian Frank · 28. Juli 2010

Hallo Leute,

seit einer Woche beschäftigt mich der Gedanke, Traffic zu sparen indem man nur Inhalt in lädt, der gerade auch im Browserfenster sichtbar ist.

Sprich, ich habe eine Seite, auf der ein Div-Layer per Include eine Page includiert (diese Page besteht aus mehreren Div-Layern). Ich möchte jedoch nicht, dass die gesamte Page (also alle Div's) beim Laden der Seite mitgeladen wird, sondern nur der Bereich, der gerade auch sichtbar ist. Wenn man also scrollt, soll der neu sichtbare Bereich per Ajax nachgeladen werden.

Habt ihr dazu eine Anregung ?

Grüße,

Fabi

Sven Mintel · 28. Juli 2010

Moin Fabian,

hier mal eine simple Umsetzung(mittels jQuery), um die Herangehensweise zu Zeigen:

Code:

<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

Inhalt einer Seite nur im sichtbaren Bereich laden

Fabian Frank

Erfahrenes Mitglied

Sven Mintel

Mitglied

Neue Beiträge