在滚动时使用ajax加载内容

我正在使用jQuery Tools Plugin作为图像滑块（ 此处为图像），但由于图像数量较多，我需要一次加载少量图像。 因为它是javascript编码的，所以我不知道滚动位置。 我想在最后一张图片出现时加载它们或类似的东西。 我不知道我放在哪里和事件监听器也没有。

这是我的代码http://jsfiddle.net/PxGTJ/

请给我一些亮点！

Answer 1

我只需要使用jQuery Tools的API，即scrollable()方法中的onSeek参数。

就是这样的

 $(".scrollable").scrollable({ vertical: true, onSeek: function() { row = this.getIndex(); // Check if it's worth to load more content if(row%4 == 0 && 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); }); } } }); 

Answer 2

这可以通过以下方式进行：

 //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. } }) ; }); 

这应该够了吧。

编辑：因为您没有使用本机滚动，我们必须对代码做一些修复：

 //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. } }) ; }); 

Answer 3

尝试这样的事情

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

或者找到最后一个图像的offset位置/位置，并在scrolling时到达偏移位置时尝试加载内容

HTML ：

 
 













 













 Hello !! 













 













  

一些CSS ：

 div { width:200px; height:200px; overflow:scroll; } 

Javascript ：

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

这是一个快速演示 http://jsfiddle.net/8QbwU/

虽然Demo没有满足你的全部要求，但我相信它确实为你提供some light进一步的帮助:)

Answer 4

首先，您将要使用jQuery

其次，在页面上放置占位符以包含您的数据。

您需要在Web服务中编写自己的GetData方法，但这是一般的想法（并从页面加载调用Refresh（）;）

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

getData函数变量传递给scrolltable插件，在滚动表时将根据需要调用它。 回调和上下文被传入，并由插件用于管理您正在操作的对象（上下文）和Web的异步性质（回调）

GetData（注意案例）webmethod需要返回一个包含一些关键信息的JSON对象，服务器端代码如何做到这一点取决于您，但此插件期望的对象如下。 Prior和Post数据用于触发何时加载更多数据，基本上，您可以滚动浏览中间/活动页面，但是当您开始查看前一页或后一页中的数据时，我们将需要获取更多数据

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

接下来是插件本身

 ///  (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) < $bodyC.data('firstRow') //Scrolling up && (($bodyC.data('firstRow') - prevRowCount) > 1) // ...and data isn't already there ) || ( (currentRow > $bodyC.data('lastRow')) //Scrolling down && (($bodyC.data('firstRow') + currRowCount + 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 || 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('
') .append($('
')) .append($('')) .append($('')) .append($('')) .append($('
')); } var $scrollContainer = $dataTable.parent(); $scrollContainer .css(containerCss) .scroll(onScroll); getDataFunction(setData, $scrollContainer, 1, batchSize); }); }; })(jQuery); 

你可能需要调整一些东西。 我刚刚将它转换为jQuery插件，它可能仍然有点小故障。