blocks|key|2479565|text|试试这样的东西|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2479566|$('#scrollable').find('img:last').load(function()+{
++++++++//load+the+content++
});|code-block|syntax|javascript|2479567|或者找到最后一个图像的offset位置/位置，并在到达scrolling上的offset+position时尝试加载内容|offset|length|style|BOLD|CODE|2479568|HTML：|2479569|<div>
+++ 
+++ 
+++Hello+!!
+++ 
+++ 
</div>+|2479570|一些CSS：|2479571|div+{
++++width:200px;
++++height:200px;
++++overflow:scroll;
}|2479572|Javascript：|2479573|$(document).ready(function()+{
+++++$('div').scroll(function()+{
+++++++++var+pos++++=+$('div').scrollTop();
+++++++++var+offset+=+$('span').offset().top;
+++++++++if(pos+>=+offset+)+{
+++++++++++alert('you+have+reached+your+destiny');
+++++++++}
+++});
});++++|2479574|这是+的快速演示|2479575|尽管演示没有满足您的全部要求，但我相信它确实为您提供了进一步的some+light+:)|2479576|entityMap^0|0|0|4|4|12|F|B|6|R|9|0|0|4|0|0|2|3|0|0|0|A|0|0|6|2|0|0|18|V|A|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|17|8|@$I|18|J|19|K|L]|$I|1A|J|1B|K|L]|$I|1C|J|1D|K|M]|$I|1E|J|1F|K|M]]|9|@]|A|$]]|$1|N|3|O|5|6|7|1G|8|@$I|1H|J|1I|K|L]]|9|@]|A|$]]|$1|P|3|Q|5|D|7|1J|8|@]|9|@]|A|$E|F]]|$1|R|3|S|5|6|7|1K|8|@$I|1L|J|1M|K|L]]|9|@]|A|$]]|$1|T|3|U|5|D|7|1N|8|@]|9|@]|A|$E|F]]|$1|V|3|W|5|6|7|1O|8|@$I|1P|J|1Q|K|L]]|9|@]|A|$]]|$1|X|3|Y|5|D|7|1R|8|@]|9|@]|A|$E|F]]|$1|Z|3|10|5|6|7|1S|8|@$I|1T|J|1U|K|L]]|9|@]|A|$]]|$1|11|3|12|5|6|7|1V|8|@$I|1W|J|1X|K|L]|$I|1Y|J|1Z|K|M]]|9|@]|A|$]]|$1|13|3|-4|5|6|7|20|8|@]|9|@]|A|$]]]|14|$]]

try something like this 

<pre><code>$('#scrollable').find('img:last').load(function() {
 //load the content 
});
</code></pre>

OR find the <code>offset</code> location/position of the last image and try loading your content when you reach the offset position on <code>scrolling</code>

HTML :

<pre><code>&lt;div&gt;
 &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
 &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
 &lt;span&gt;Hello !!&lt;/span&gt;
 &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
 &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
&lt;/div&gt; 
</code></pre>

some CSS :

<pre><code>div {
 width:200px;
 height:200px;
 overflow:scroll;
}
</code></pre>

Javascript :

<pre><code>$(document).ready(function() {
 $('div').scroll(function() {
 var pos = $('div').scrollTop();
 var offset = $('span').offset().top;
 if(pos &gt;= offset ) {
 alert('you have reached your destiny');
 }
 });
}); 
</code></pre>

here's a quick demo <a href="http://jsfiddle.net/8QbwU/" rel="nofollow noreferrer">http://jsfiddle.net/8QbwU/</a>

Though Demo doesn't met your full requirements, I believe It does give you <code>some light</code> to proceed further :)

blocks|key|3887345|text|这可以通过以下方式实现：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3887346|//When+the+DOM+is+ready...
$(document).ready(function()+{

+++//When+the+user+scrolls...
+++$(window).scroll(function()+{
+++++++var+tolerance+=+800,
+++++++++++scrollTop+=+$(window).scrollTop();

+++++++//If+the+the+distance+to+the+top+is+greater+than+the+tolerance...
+++++++if(scrollTop+>+tolerance)+{

+++++++++++//Do+something.+Ajax+Call,+Animations,+whatever.

+++++++}
+++})+;
});|code-block|syntax|javascript|3887347|这应该能起到作用。|3887348|编辑：因为您没有使用原生滚动，所以我们必须对代码进行一些修复：|offset|length|style|BOLD|3887349|//When+the+DOM+is+ready...
$(document).ready(function()+{

+++//When+the+user+scrolls...
+++$("div.scrollable").find(".next").click(function()+{
+++++++var+tolerance+=+800,
+++++++++++//+The+absolute+value+of+the+integer+associated+
+++++++++++//+to+the+top+css+property
+++++++++++scrollTop+=+Math.abs(parseInt($("div.items").css("top")));

+++++++//If+the+the+distance+to+the+top+is+greater+than+the+tolerance...
+++++++if(scrollTop+>+tolerance)+{

+++++++++++//Do+something.+Ajax+Call,+Animations,+whatever.

+++++++}
+++})+;
});|3887350|entityMap^0|0|0|0|0|3|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|V|8|@$K|W|L|X|M|N]]|9|@]|A|$]]|$1|O|3|P|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

That could be made the following way:

<pre><code>//When the DOM is ready...
$(document).ready(function() {

 //When the user scrolls...
 $(window).scroll(function() {
 var tolerance = 800,
 scrollTop = $(window).scrollTop();

 //If the the distance to the top is greater than the tolerance...
 if(scrollTop &gt; tolerance) {

 //Do something. Ajax Call, Animations, whatever.

 }
 }) ;
});
</code></pre>

That should do the trick.

EDIT: Because you're not using the native scroll, we've got to do a little fix to the code:

<pre><code>//When the DOM is ready...
$(document).ready(function() {

 //When the user scrolls...
 $("div.scrollable").find(".next").click(function() {
 var tolerance = 800,
 // The absolute value of the integer associated 
 // to the top css property
 scrollTop = Math.abs(parseInt($("div.items").css("top")));

 //If the the distance to the top is greater than the tolerance...
 if(scrollTop &gt; tolerance) {

 //Do something. Ajax Call, Animations, whatever.

 }
 }) ;
});
</code></pre>

blocks|key|2479691|text|首先，您需要使用jQuery来完成此任务|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2479692|其次，在页面上放置一个占位符来包含您的数据。|2479693|<table+id="dataTable"+class="someClass"+style="border-collapse:+collapse;">
++++<colgroup>
++++++++<col+width="12%25"+/>
++++++++<col+width="12%25"+/>
++++++++<col+width="12%25"+/>
++++++++
++++</colgroup>
</table>|code-block|syntax|javascript|2479694|您需要在own服务中编写自己的GetData方法，但这是一般的想法(并从页面加载调用Refresh()；)|2479695|function+Refresh()+{
++++var+getData+=+function(callback,+context,+startAt,+batchSize)+{
++++++++MyWebservice.GetData(
++++++++++++startAt,+++//What+record+to+start+at+(1+to+start)
++++++++++++batchSize,+//Results+per+page
++++++++++++3,+++++++++//Pages+of+data
++++++++++++function(result,+context,+method)+{
++++++++++++++++callback(result,+context,+method);
++++++++++++},
++++++++++++null,
++++++++++++context
++++++++);
++++};

++++$('#dataTable').scrolltable(getData);
}|2479696|getData函数变量被传递到scrolltable插件中，它将在滚动表格时根据需要调用。回调和上下文被传入，并由插件用来管理您正在操作的对象(上下文)和web的异步性质(回调)|2479697|JSON+(注意用例)+webmethod需要返回一个包含一些关键信息的GetData对象，您的服务器端代码如何做到这一点取决于您，但是这个插件需要的对象如下所示。Prior和Post数据用于触发何时加载更多数据，基本上，您可以在中间/活动页面中滚动，但当您开始在prior或post页面中看到数据时，我们将需要获取更多数据|2479698|++++return+new+{
++++++++//+TotalRows+in+the+ENTIRE+result+set+(if+it+weren't+paged/scrolled)
++++++++TotalRows+=+tableElement.Element("ResultCount").Value,
++++++++//+The+current+position+we+are+viewing+at
++++++++Position+=+startAt,
++++++++//+Number+of+items+per+"page"
++++++++PageSize+=+tableElement.Element("PageSize").Value,
++++++++//+Number+of+pages+we+are+working+with+(3)
++++++++PageCount+=+tableElement.Element("PageCount").Value,
++++++++//+Data+page+prior+to+active+results
++++++++PriorData+=+tbodyTop.Html(),
++++++++//+Data+to+display+as+active+results
++++++++CurrentData+=+tbodyCtr.Html(),
++++++++//+Data+to+display+after+active+results
++++++++PostData+=+tbodyBot.Html()
++++};|2479699|接下来是插件本身|2479700|///+<reference+path="../../js/jquery-1.2.6.js"+/>
(function($)+{
++++$.fn.scrolltable+=+function(getDataFunction)+{
++++++++var+setData+=+function(result,+context)+{
++++++++++++var+timeoutId+=+context.data('timeoutId');
++++++++++++if+(timeoutId)+{
++++++++++++++++clearTimeout(timeoutId);
++++++++++++++++context.data('timeoutId',+null);
++++++++++++}

++++++++++++var+$table+=+context.find("table");
++++++++++++var+$topSpacer+=+$table.find('#topSpacer');
++++++++++++var+$bottomSpacer+=+$table.find('#bottomSpacer');

++++++++++++var+$newBodyT+=+$table.children('#bodyT');
++++++++++++var+$newBodyC+=+$table.children('#bodyC');
++++++++++++var+$newBodyB+=+$table.children('#bodyB');

++++++++++++var+preScrollTop+=+context[0].scrollTop;

++++++++++++$newBodyT.html(result.PriorData);
++++++++++++$newBodyC.html(result.CurrentData);
++++++++++++$newBodyB.html(result.PostData);

++++++++++++var+rowHeight+=+$newBodyC.children('tr').height()+%7C%7C+20;
++++++++++++var+rowCountT+=+$newBodyT.children('tr').length;
++++++++++++var+rowCountC+=+$newBodyC.children('tr').length;
++++++++++++var+rowCountB+=+$newBodyB.children('tr').length;

++++++++++++result.Position+=+parseInt(result.Position);
++++++++++++$newBodyC.data('firstRow',+result.Position);
++++++++++++$newBodyC.data('lastRow',+(result.Position+%2B+rowCountC));
++++++++++++context.data('batchSize',+result.PageSize);
++++++++++++context.data('totalRows',+result.TotalRows);

++++++++++++var+displayedRows+=+rowCountT+%2B+rowCountC+%2B+rowCountB;
++++++++++++var+rowCountTopSpacer+=+Math.max(result.Position+-+rowCountT+-+1,+0);
++++++++++++var+rowCountBottomSpacer+=+result.TotalRows+-+displayedRows+-+rowCountTopSpacer;

++++++++++++if+(rowCountTopSpacer+==+0)+{
++++++++++++++++$topSpacer.closest('tbody').hide();
++++++++++++}+else+{
++++++++++++++++$topSpacer.closest('tbody').show();
++++++++++++++++$topSpacer.height(Math.max(rowCountTopSpacer+*+rowHeight,+0));
++++++++++++}

++++++++++++if+(rowCountBottomSpacer+==+0)+{
++++++++++++++++$bottomSpacer.closest('tbody').hide();
++++++++++++}+else+{
++++++++++++++++$bottomSpacer.closest('tbody').show();
++++++++++++++++$bottomSpacer.height(Math.max(rowCountBottomSpacer+*+rowHeight,+0));
++++++++++++}

++++++++++++context[0].scrollTop+=+preScrollTop;++//Maintain+Scroll+Position+as+it+sometimes+was+off
++++++++};

++++++++var+onScroll+=+function(ev)+{
++++++++++++var+$scrollContainer+=+$(ev.target);

++++++++++++var+$dataTable+=+$scrollContainer.find('#dataTable');
++++++++++++var+$bodyT+=+$dataTable.children('tbody#bodyT');
++++++++++++var+$bodyC+=+$dataTable.children('tbody#bodyC');
++++++++++++var+$bodyB+=+$dataTable.children('tbody#bodyB');

++++++++++++var+rowHeight+=+$bodyC.children('tr').height();
++++++++++++var+currentRow+=+Math.floor($scrollContainer.scrollTop()+/+rowHeight);
++++++++++++var+displayedRows+=+Math.floor($scrollContainer.height()+/+rowHeight);

++++++++++++var+batchSize+=+$scrollContainer.data('batchSize');
++++++++++++var+totalRows+=+$scrollContainer.data('totalRows');

++++++++++++var+prevRowCount+=+$bodyT.children('tr').length;
++++++++++++var+currRowCount+=+$bodyC.children('tr').length;
++++++++++++var+postRowCount+=+$bodyB.children('tr').length;

++++++++++++var+doGetData+=+(
++++++++++++++++++++++++++++++++(
++++++++++++++++++++++++++++++++++++(currentRow+%2B+displayedRows)+<+$bodyC.data('firstRow')++++++++++++++++++++++//Scrolling+up
++++++++++++++++++++++++++++++++++++&&+(($bodyC.data('firstRow')+-+prevRowCount)+>+1)+++++++++++++++++++++++++++//+...and+data+isn't+already+there
++++++++++++++++++++++++++++++++)
++++++++++++++++++++++++++++%7C%7C
++++++++++++++++++++++++++++++++(
++++++++++++++++++++++++++++++++++++(currentRow+>+$bodyC.data('lastRow'))+++++++++++++++++++++++++++++++++++++++//Scrolling+down
++++++++++++++++++++++++++++++++++++&&+(($bodyC.data('firstRow')+%2B+currRowCount+%2B+postRowCount)+<+totalRows)++++//+...and+data+isn't+already+there
++++++++++++++++++++++++++++++++)
++++++++++++++++++++++++++++);

++++++++++++if+(doGetData)+{
++++++++++++++++var+batchSize+=+$scrollContainer.data('batchSize');

++++++++++++++++var+timeoutId+=+$scrollContainer.data('timeoutId');
++++++++++++++++if+(timeoutId)+{
++++++++++++++++++++clearTimeout(timeoutId);
++++++++++++++++++++$scrollContainer.data('timeoutId',+null);
++++++++++++++++}

++++++++++++++++timeoutId+=+setTimeout(function()+{
++++++++++++++++++++getDataFunction(setData,+$scrollContainer,+currentRow,+batchSize);
++++++++++++++++},+50);

++++++++++++++++$scrollContainer.data('timeoutId',+timeoutId);
++++++++++++}
++++++++};

++++++++return+this.each(function()+{
++++++++++++var+$dataTable+=+$(this);

++++++++++++if+(!getDataFunction)+
++++++++++++++++alert('GetDataFunction+is+Required');

++++++++++++var+batchSize+=+batchSize+%7C%7C+25;
++++++++++++var+outerContainerCss+=+outerContainerCss+%7C%7C+{};

++++++++++++var+defaultContainerCss+=+{
++++++++++++++++overflow:+'auto',
++++++++++++++++width:+'100%25',
++++++++++++++++height:+'200px',
++++++++++++++++position:+'relative'
++++++++++++};

++++++++++++var+containerCss+=+$.extend({},+defaultContainerCss,+outerContainerCss);

++++++++++++if+(!+$dataTable.parent().hasClass('_outerContainer'))+{
++++++++++++++++$dataTable
++++++++++++++++++++.wrap('<div+class="_outerContainer"+/>')
++++++++++++++++++++.append($('<tbody+class="spacer"><tr><td><div+id="topSpacer"+/></td></tr></tbody>'))
++++++++++++++++++++.append($('<tbody+id="bodyT"+/>'))
++++++++++++++++++++.append($('<tbody+id="bodyC"+/>'))
++++++++++++++++++++.append($('<tbody+id="bodyB"+/>'))
++++++++++++++++++++.append($('<tbody+class="spacer"><tr><td><div+id="bottomSpacer"+/></td></tr></tbody>'));
++++++++++++}

++++++++++++var+$scrollContainer+=+$dataTable.parent();

++++++++++++$scrollContainer
++++++++++++++++.css(containerCss)
++++++++++++++++.scroll(onScroll);

++++++++++++getDataFunction(setData,+$scrollContainer,+1,+batchSize);
++++++++});
++++};
})(jQuery);|2479701|你可能需要调整一些东西。我刚把它转换成一个jQuery插件，它可能还是有点小问题。|2479702|entityMap^0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|17|8|@]|9|@]|A|$G|H]]|$1|S|3|T|5|6|7|18|8|@]|9|@]|A|$]]|$1|U|3|V|5|F|7|19|8|@]|9|@]|A|$G|H]]|$1|W|3|X|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Z|$]]

First, you'll want to use jQuery for this

Second, put a placeholder on your page to contain your data.

<pre><code>&lt;table id="dataTable" class="someClass" style="border-collapse: collapse;"&gt;
 &lt;colgroup&gt;
 &lt;col width="12%" /&gt;
 &lt;col width="12%" /&gt;
 &lt;col width="12%" /&gt;
 &lt;!-- Define your column widths --&gt;
 &lt;/colgroup&gt;
&lt;/table&gt;
</code></pre>

You'll need to code your own GetData method in a webservice, but this is the general idea (And call Refresh(); from your page load)

<pre><code>function Refresh() {
 var getData = function(callback, context, startAt, batchSize) {
 MyWebservice.GetData(
 startAt, //What record to start at (1 to start)
 batchSize, //Results per page
 3, //Pages of data
 function(result, context, method) {
 callback(result, context, method);
 },
 null,
 context
 );
 };

 $('#dataTable').scrolltable(getData);
}
</code></pre>

The getData function variable is passed into the scrolltable plugin, it will be called as needed when the table is being scrolled. The callback and context are passed in, and used by the plugin to manage the object you are operating on (context) and the asynchronous nature of the web (callback)

The GetData (note the case) webmethod needs to return a JSON object that contains some critical information, how your server side code does this is up to you, but the object this plugin expects is the following. The Prior and Post data are used to trigger when to load more data, basically, you can scroll through the middle/active page, but when you start seeing data in the prior or post page, we're going to need to fetch more data

<pre><code> return new {
 // TotalRows in the ENTIRE result set (if it weren't paged/scrolled)
 TotalRows = tableElement.Element("ResultCount").Value,
 // The current position we are viewing at
 Position = startAt,
 // Number of items per "page"
 PageSize = tableElement.Element("PageSize").Value,
 // Number of pages we are working with (3)
 PageCount = tableElement.Element("PageCount").Value,
 // Data page prior to active results
 PriorData = tbodyTop.Html(),
 // Data to display as active results
 CurrentData = tbodyCtr.Html(),
 // Data to display after active results
 PostData = tbodyBot.Html()
 };
</code></pre>

Next is the plugin itself

<pre><code>/// &lt;reference path="../../js/jquery-1.2.6.js" /&gt;
(function($) {
 $.fn.scrolltable = function(getDataFunction) {
 var setData = function(result, context) {
 var timeoutId = context.data('timeoutId');
 if (timeoutId) {
 clearTimeout(timeoutId);
 context.data('timeoutId', null);
 }

 var $table = context.find("table");
 var $topSpacer = $table.find('#topSpacer');
 var $bottomSpacer = $table.find('#bottomSpacer');

 var $newBodyT = $table.children('#bodyT');
 var $newBodyC = $table.children('#bodyC');
 var $newBodyB = $table.children('#bodyB');

 var preScrollTop = context[0].scrollTop;

 $newBodyT.html(result.PriorData);
 $newBodyC.html(result.CurrentData);
 $newBodyB.html(result.PostData);

 var rowHeight = $newBodyC.children('tr').height() || 20;
 var rowCountT = $newBodyT.children('tr').length;
 var rowCountC = $newBodyC.children('tr').length;
 var rowCountB = $newBodyB.children('tr').length;

 result.Position = parseInt(result.Position);
 $newBodyC.data('firstRow', result.Position);
 $newBodyC.data('lastRow', (result.Position + rowCountC));
 context.data('batchSize', result.PageSize);
 context.data('totalRows', result.TotalRows);

 var displayedRows = rowCountT + rowCountC + rowCountB;
 var rowCountTopSpacer = Math.max(result.Position - rowCountT - 1, 0);
 var rowCountBottomSpacer = result.TotalRows - displayedRows - rowCountTopSpacer;

 if (rowCountTopSpacer == 0) {
 $topSpacer.closest('tbody').hide();
 } else {
 $topSpacer.closest('tbody').show();
 $topSpacer.height(Math.max(rowCountTopSpacer * rowHeight, 0));
 }

 if (rowCountBottomSpacer == 0) {
 $bottomSpacer.closest('tbody').hide();
 } else {
 $bottomSpacer.closest('tbody').show();
 $bottomSpacer.height(Math.max(rowCountBottomSpacer * rowHeight, 0));
 }

 context[0].scrollTop = preScrollTop; //Maintain Scroll Position as it sometimes was off
 };

 var onScroll = function(ev) {
 var $scrollContainer = $(ev.target);

 var $dataTable = $scrollContainer.find('#dataTable');
 var $bodyT = $dataTable.children('tbody#bodyT');
 var $bodyC = $dataTable.children('tbody#bodyC');
 var $bodyB = $dataTable.children('tbody#bodyB');

 var rowHeight = $bodyC.children('tr').height();
 var currentRow = Math.floor($scrollContainer.scrollTop() / rowHeight);
 var displayedRows = Math.floor($scrollContainer.height() / rowHeight);

 var batchSize = $scrollContainer.data('batchSize');
 var totalRows = $scrollContainer.data('totalRows');

 var prevRowCount = $bodyT.children('tr').length;
 var currRowCount = $bodyC.children('tr').length;
 var postRowCount = $bodyB.children('tr').length;

 var doGetData = (
 (
 (currentRow + displayedRows) &lt; $bodyC.data('firstRow') //Scrolling up
 &amp;&amp; (($bodyC.data('firstRow') - prevRowCount) &gt; 1) // ...and data isn't already there
 )
 ||
 (
 (currentRow &gt; $bodyC.data('lastRow')) //Scrolling down
 &amp;&amp; (($bodyC.data('firstRow') + currRowCount + postRowCount) &lt; totalRows) // ...and data isn't already there
 )
 );

 if (doGetData) {
 var batchSize = $scrollContainer.data('batchSize');

 var timeoutId = $scrollContainer.data('timeoutId');
 if (timeoutId) {
 clearTimeout(timeoutId);
 $scrollContainer.data('timeoutId', null);
 }

 timeoutId = setTimeout(function() {
 getDataFunction(setData, $scrollContainer, currentRow, batchSize);
 }, 50);

 $scrollContainer.data('timeoutId', timeoutId);
 }
 };

 return this.each(function() {
 var $dataTable = $(this);

 if (!getDataFunction) 
 alert('GetDataFunction is Required');

 var batchSize = batchSize || 25;
 var outerContainerCss = outerContainerCss || {};

 var defaultContainerCss = {
 overflow: 'auto',
 width: '100%',
 height: '200px',
 position: 'relative'
 };

 var containerCss = $.extend({}, defaultContainerCss, outerContainerCss);

 if (! $dataTable.parent().hasClass('_outerContainer')) {
 $dataTable
 .wrap('&lt;div class="_outerContainer" /&gt;')
 .append($('&lt;tbody class="spacer"&gt;&lt;tr&gt;&lt;td&gt;&lt;div id="topSpacer" /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;'))
 .append($('&lt;tbody id="bodyT" /&gt;'))
 .append($('&lt;tbody id="bodyC" /&gt;'))
 .append($('&lt;tbody id="bodyB" /&gt;'))
 .append($('&lt;tbody class="spacer"&gt;&lt;tr&gt;&lt;td&gt;&lt;div id="bottomSpacer" /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;'));
 }

 var $scrollContainer = $dataTable.parent();

 $scrollContainer
 .css(containerCss)
 .scroll(onScroll);

 getDataFunction(setData, $scrollContainer, 1, batchSize);
 });
 };
})(jQuery);
</code></pre>

You'll likely need to tweak some things. I just converted it to a jQuery plugin and it's probably still a little glitchy.

blocks|key|3887456|text|我只需要使用jQuery+Tools的API，即scrollable()方法中的onSeek参数。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3887457|差不多就是这样|3887458|$(".scrollable").scrollable({
++++vertical:+true,
++++onSeek:+function()+{
++++++++row+=+this.getIndex();
++++++++//+Check+if+it's+worth+to+load+more+content
++++++++if(row%254+==+0+&&+row+!=+0)+{
++++++++++++var+id+=+this.getItems().find('img').filter(':last').attr('id');
++++++++++++id+=+parseInt(id);
++++++++++++$.get('galeria.items.php?id='%2Bid,+null,+function(html)+{
++++++++++++++++$('.items').append(html);
++++++++++++});
++++++++}
++++}
});+|code-block|syntax|javascript|3887459|entityMap^0|O|C|14|6|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

I just had to use jQuery Tools' API, the <code>onSeek</code> parameter within the <code>scrollable()</code> method.

It was something like that

<pre><code>$(".scrollable").scrollable({
 vertical: true,
 onSeek: function() {
 row = this.getIndex();
 // Check if it's worth to load more content
 if(row%4 == 0 &amp;&amp; row != 0) {
 var id = this.getItems().find('img').filter(':last').attr('id');
 id = parseInt(id);
 $.get('galeria.items.php?id='+id, null, function(html) {
 $('.items').append(html);
 });
 }
 }
}); 
</code></pre>

I'm using jQuery Tools Plugin as image slider (<a href="http://rookery9.aviary.com.s3.amazonaws.com/4538500/4538792_6d01.png" rel="nofollow noreferrer">image here</a>), but due to large amount of images I need to load them few at a time. Since it's javascript coded, I can't have the scroll position as far as I know. I want to load them as soon as the last image shows up or something like that. I have no idea where I put and event listener neither anything.

Here is my code <a href="http://jsfiddle.net/PxGTJ/" rel="nofollow noreferrer">http://jsfiddle.net/PxGTJ/</a>

Give me some light, please!

Loading content with ajax while scrolling

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我使用jQuery工具插件作为图像滑块()，但由于大量的图像，我需要一次加载几个。因为它是javascript编码的，据我所知我不能知道滚动的位置。我想在最后一张图片或类似的东西出现时加载它们。我不知道我放在哪里，事件监听器也不知道。下面是我的代码请给我一点光！

问在滚动时使用ajax加载内容
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在滚动时使用ajax加载内容EN