页面的Jscroll功能

本文介绍了页面的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 likeHome 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> 但它正在加载页面内页...... 请有人查看。 .. 推荐答案 这篇关于页面的Jscroll功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！