页面的Jscroll功能 [英] Jscroll Function for a page
本文介绍了页面的Jscroll功能的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的主页上有1000个产品....装回家已经太晚了...所以我决定将滚动加载或延迟加载或无限滚动应用于我的应用程序..
i ding在谷歌我得到以下代码..我的应用程序正常工作...但它正在加载像
i have 1000 products in my home page....loading home is super late...so am decided to apply scroll loading or lazy loading or infinite scroll to my application..
i ding in google i got following code..it is working fine for my application...but it's loading like
Home Page 50 Products
--gap-----While Scrolling Loaded 50 Products
--gap-------------While Scrolling Loade 50 Products
--gap-----------------------While Scrolling Loade 50 Products
它显示如上...
请有人帮助我......或者如果你有任何其他代码建议我
it's displaying like above...
please anyone help me..or suggest me any other code if you have
(function ($) {
// Define the jscroll namespace and default settings
$.jscroll = {
defaults: {
debug: false,
autoTrigger: true,
loadingHtml: '<small>Loading...</small>',
padding: 0,
nextSelector: 'a:last',
contentSelector: '',
pagingSelector: ''
}
};
//// Constructor
var jScroll = function ($e, options) {
// Private vars
var _data = $e.data('jscroll'),
_userOptions = (typeof options === 'function') ? { callback: options } : options,
_options = $.extend({}, $.jscroll.defaults, _userOptions, _data || {}),
_isWindow = ($e.css('overflow-y') === 'visible'),
_$next = $e.find(_options.nextSelector).first(),
_$window = $(window),
_$document = $(document),
_$scroll = _isWindow ? $(window) : $e,
_nextHref = _options.contentSelector ? _$next.attr('href') + ' ' + _options.contentSelector : _$next.attr('href');
// Initialization
$e.data('jscroll', $.extend({}, _data, { initialized: true, waiting: false, nextHref: _nextHref }));
_wrapInnerContent();
_preloadImage();
if (_options.autoTrigger) {
_nextWrap(_$next);
_$scroll.bind('scroll.jscroll', function () {
return _observe();
});
} else {
_$next.bind('click.jscroll', function () {
_nextWrap(_$next);
_load();
return false;
});
}
// Private methods
// Check if a loading image is defined and preload
function _preloadImage() {
var src = $(_options.loadingHtml).filter('img').attr('src');
if (src) {
var image = new Image();
image.src = src;
}
}
// Wrapper inner content, if it isn't already
function _wrapInnerContent() {
if (!$e.find('.jscroll-inner').length) {
$e.contents().wrapAll('<div class="jscroll-inner" />');
}
}
// Find the next link's parent, or add one, and hide it
function _nextWrap($next) {
if (_options.pagingSelector) {
var $parent = $next.closest(_options.pagingSelector).hide();
} else {
var $parent = $next.parent().not('.jscroll-inner,.jscroll-added').addClass('jscroll-next-parent').hide();
if (!$parent.length) {
$next.wrap('<div class="jscroll-next-parent" />').parent().hide();
}
}
}
// Remove the jscroll behavior and data from an element
function _destroy() {
return _$scroll.unbind('.jscroll')
.removeData('jscroll')
.find('.jscroll-inner').children().unwrap()
.filter('.jscroll-added').children().unwrap();
}
// Observe the scroll event for when to trigger the next load
function _observe() {
_wrapInnerContent();
var $inner = $e.find('div.jscroll-inner').first(),
data = $e.data('jscroll'),
borderTopWidth = parseInt($e.css('borderTopWidth')),
borderTopWidthInt = isNaN(borderTopWidth) ? 0 : borderTopWidth,
iContainerTop = parseInt($e.css('paddingTop')) + borderTopWidthInt,
iTopHeight = _isWindow ? _$scroll.scrollTop() : $e.offset().top,
innerTop = $inner.length ? $inner.offset().top : 0,
iTotalHeight = Math.ceil(iTopHeight - innerTop + _$scroll.height() + iContainerTop);
if (_checkNextHref(data) && !data.waiting && iTotalHeight + _options.padding >= $inner.outerHeight()) {
data.nextHref = $.trim(data.nextHref + ' ' + _options.contentSelector);
_debug('info', 'jScroll:', $inner.outerHeight() - iTotalHeight, 'from bottom. Loading next request...');
return _load();
}
}
// Check if the href for the next set of content has been set
function _checkNextHref(data) {
data = data || $e.data('jscroll');
if (!data.nextHref) {
_debug('warn', 'jScroll: nextSelector not found - destroying');
$e.jscroll.destroy();
return false;
} else return true;
}
// Load the next set of content, if available
function _load() {
var $inner = $e.find('div.jscroll-inner').first(),
data = $e.data('jscroll');
data.waiting = true;
$inner.append('<div class="jscroll-added" />')
.children('.jscroll-added').last()
.html('<div class="jscroll-loading">' + _options.loadingHtml + '</div>');
return _checkNextHref(data) && $e.animate({ scrollTop: $inner.outerHeight() }, 0, function () {
$inner.find('div.jscroll-added').last().load(data.nextHref, function (r, status, xhr) {
var $next = $(this).find(_options.nextSelector).first();
data.waiting = false;
data.nextHref = _options.contentSelector ? $next.attr('href') + ' ' + _options.contentSelector : $next.attr('href');
$('.jscroll-next-parent', $e).remove(); // Remove the previous next link now that we have a new one
if (_options.autoTrigger) {
_nextWrap($next);
} else {
$next.bind('click.jscroll', function () {
_nextWrap($next);
_observe();
return false;
});
}
if (_options.callback) {
_options.callback.call(this);
}
_debug('dir', data);
});
});
}
// Safe console debug - http://klauzinski.com/javascript/safe-firebug-console-in-javascript
function _debug(m) {
if (_options.debug && typeof console === 'object' && (typeof m === 'object' || typeof console[m] === 'function')) {
if (typeof m === 'object') {
var args = [];
for (var sMethod in m) {
if (typeof console[sMethod] === 'function') {
args = (m[sMethod].length) ? m[sMethod] : [m[sMethod]];
console[sMethod].apply(console, args);
} else {
console.log.apply(console, args);
}
}
} else {
console[m].apply(console, Array.prototype.slice.call(arguments, 1));
}
}
}
// Expose API methods via the jQuery.jscroll namespace, e.g. $('sel').jscroll.method()
$.extend($e.jscroll, {
destroy: _destroy
});
return $e;
};
// Define the jscroll plugin method and loop
$.fn.jscroll = function (m) {
return this.each(function () {
var $this = $(this),
data = $this.data('jscroll');
// Instantiate jScroll on this element if it hasn't been already
if (data && data.initialized) return;
var jscroll = new jScroll($this, m);
});
};
})(jQuery);
这是我在Jquery中使用的代码...
以下是我正在使用的脚本...
this is the code i was used in Jquery...
the following one is the script am using...
<script type="text/javascript">
$(document).ready(function () {
$(".page-body").jscroll();
calculateheight();
});
function calculateheight() {
var maxHeight = 0;
$('.item-box')
.each(function () {
//alert($(this).height());
maxHeight = Math.max(maxHeight, $(this).height());
});
//alert("maxheight = " + maxHeight);
$('.item-box').height(maxHeight);
}
</script>
但它正在加载页面内页......
请有人查看。 ..
推荐答案
）{
// < span class =code-comment>定义jscroll命名空间和默认设置
.jscroll = {
默认值：{
debug： false ，
autoTrigger： true ，
loadingHtml：' < small>正在加载...< / small>'，
填充： 0 ，
nextSelector：' a：last'，
contentSelector： ' '，
pagingSelector：' '
}
};
/// /构造函数
var jScroll = function（
.jscroll = { defaults: { debug: false, autoTrigger: true, loadingHtml: '<small>Loading...</small>', padding: 0, nextSelector: 'a:last', contentSelector: '', pagingSelector: '' } }; //// Constructor var jScroll = function (
e，options）{
// 私有变量
var _data =
e, options) { // Private vars var _data =
这篇关于页面的Jscroll功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
