कैसे इतिहास वेब एपीआई के साथ एक अनंत स्क्रॉल अनुभव बनाने के लिए

() translation by (you can also view the original English article)

इस ट्यूटोरियल में हम अपने इतिहास वेब एपीआई कौशल को सुदृढ़ करने जा रहे हैं। हम उस वेब पर एक यूएक्स पैटर्न बनाने जा रहे हैं जो समान माप में प्यार और loathed है: अनंत स्क्रॉलिंग(infinite scrolling)।

अनंत स्क्रॉलिंग एक इंटरफ़ेस पैटर्न है जो नई सामग्री को लोड करता है क्योंकि हम किसी दिए गए वेब पेज के अंत तक पहुंचते हैं। समझदारी से लागू होने पर अनंत स्क्रॉलिंग उपयोगकर्ताओं की सगाई को यकीनन रख सकती है; फेसबुक, ट्विटर और पिनइन्ट्रस्ट जैसे सामाजिक प्लेटफार्मों पर होने वाले कुछ बेहतरीन उदाहरण।

यह ध्यान देने योग्य है कि, हम अपने पिछले ट्यूटोरियल में जो कुछ हमने बनाया है, उससे हम एक महत्वपूर्ण पायदान ले रहे हैं, इतिहास वेब एपीआई के साथ लवली, चिकनी पृष्ठ बदलाव। इस ट्यूटोरियल में हम उपयोगकर्ता के स्क्रॉलिंग इंटरैक्शन से निपटेंगे, जो एक बहुत ही तीव्र दर पर हो सकता है। अगर हम अपने कोड से सावधान नहीं हैं, तो बदले में, हमारी वेबसाइट के प्रदर्शन को नुकसान पहुंचाएगा। सुनिश्चित करें कि आप इस पर प्रयास करने से पहले पिछले ट्यूटोरियल पढ़ते हैं, सिर्फ आपको यह समझने के लिए कि हम क्या कर रहे हैं।

फिर भी, यदि आप एक चुनौती के विचार से रोमांचित हैं, तो अपने सीटबेल्ट को जकड़ लें, तैयार रहें और चलो शुरू करो!

डेमो वेबसाइट का निर्माण

हमारी साइट एक स्थिर ब्लॉग है। आप इसे सादे एचटीएमएल से बना सकते हैं, या एक स्थिर साइट जनरेटर जैसे कि जैकल, मिडलमन, या हेक्सो का लाभ उठा सकते हैं। इस ट्यूटोरियल के लिए हमारा डेमो निम्न प्रकार से दिखता है:

एचटीएमएल संरचना के संबंध में कुछ चीजें हैं जो आपके ध्यान की आवश्यकता होती हैं।

<!-- site header -->
<div class="content" id="main">
  <article class="article" id="article-5" data-article-id="5">
		<!-- content -->
	</article>
<!-- site footer -->

जैसा कि आप ऊपर कोड स्निपेट से देख सकते हैं, आर्टकल को एक अद्वितीय ID के साथ एक HTML element में लपेटा जाना चाहिए। आप एक div या section तत्व का उपयोग कर सकते हैं, तत्व के लिए id नामकरण के कार्य में कोई संयम न हो।
साथ ही, आर्टकल पर ही, आपको data-article-id ऐट्रब्यूट जोड़ने की आवश्यकता होगी जिसमें आलेख के संबंधित id संख्या शामिल है।

वेबसाइट शैलियों की अवधि में विस्तृत करने के लिए स्वतंत्र महसूस करें; इसे अधिक रंगीन, आकर्षक बनाना, या अधिक तत्व जोड़ने।

जावास्क्रिप्ट लोड करें

आरंभ करने के लिए, निम्न जावास्क्रिप्ट पुस्तकालयों को अपने ब्लॉग के प्रत्येक पृष्ठ पर निम्न क्रम में लोड करें।

jquery.js : लाइब्रेरी जो हम तत्वों को चुनने, नई सामग्री जोड़ने, नए वर्ग जोड़ने और AJAX अनुरोध करने के लिए उपयोग करेंगे।
history.js : एक पॉलीफ़िल जो ब्राउज़रों के मूल इतिहास एपीआई की ओर जाता है।

हमारे कस्टम जेक्वीरी(jQuery) प्लगइन

इन दो के अलावा, हमें अपनी जावास्क्रिप्ट फाइल को लोड करना होगा जहां हम स्क्रॉल को अनंत स्क्रॉल करने के लिए लिख सकते हैं। जिस तरीके से हम ले लेंगे, वह है कि हम जावास्क्रिप्ट को जेक्वीरी(jQuery) के प्लगइन में लपेटें, बल्कि इसे सीधे लिखने के बजाय, जैसा हमने पिछले ट्यूटोरियल में किया है।

हम जेक्वीरी प्लगइन बॉयलरप्लेट के साथ प्लगइन शुरू कर देंगे। यह एचटीएमएल 5 बॉयलरप्लेट के समान है, क्योंकि इसमें टेम्पलेट्स, पैटर्न और श्रेष्ठ प्रथाओं का एक संग्रह प्रदान करता है, जिस पर एक जेक्वीरी प्लगइन का निर्माण होता है।

बॉयलरप्लेट डाउनलोड करें, इसे अपनी वेबसाइट की निर्देशिका में रखें जहां सभी जावास्क्रिप्ट फाइलें मौजूद हैं (जैसे /assets/js/) और फ़ाइल को "keepscrolling.Jquery.js" में नाम बदलें। (यह नाम डोरियों से फाइन्डिंग निमो और उनकी प्रसिद्ध रेखा "कीप स्विमिंग") से प्रेरित था।

assets/js
├── keepscrolling.jquery.js
├── keepscrolling.jquery.js.map
└── src
    └── keepscrolling.jquery.js

प्लगइन हमें विकल्प या सेटिंग्स के साथ लचीलेपन को लागू करने की अनुमति देगा।

जेक्वीरी प्लगइन संरचना को देखकर

एक जेक्वीरी के प्लगइन को लिखने से थोड़ा अलग तरीके से सोचने की आवश्यकता होती है, इसलिए हम पहले यह जांचेंगे कि हमारे जेक्वीरी प्लगिन किसी भी कोड में जोड़ने से पहले संरचित है। जैसा कि आप नीचे देख सकते हैं, मैंने कोड को चार भागों में विभाजित किया है:

;( function( $, window, document, undefined ) {

	"use strict";

	// 1.
	var pluginName = "keepScrolling",
		 defaults = {};

	// 2.
	function Plugin ( element, options ) {

		this.element = element;
		this.settings = $.extend( {}, defaults, options );

		this._defaults = defaults;
		this._name = pluginName;

		this.init();
	}

	// 3.
	$.extend( Plugin.prototype, {
		init: function() {
			console.log( "Plugin initialized" );
		},
	} );

	// 4.
	$.fn[ pluginName ] = function( options ) {
		return this.each( function() {
			if ( !$.data( this, "plugin_" + pluginName ) ) {
				$.data( this, "plugin_" +
					pluginName, new Plugin( this, options ) );
			}
		} );
	};

} )( jQuery, window, document );

कोड के पहले खंड में, हम अपना प्लगिन नाम निर्दिष्ट करते हैं,keepScrolling, जावास्क्रिप्ट सामान्य नामकरण सम्मेलनों के अनुसार "camel case" के साथ। हमारे पास एक वैरिएबल, defaults, जिसमें प्लगइन डिफ़ॉल्ट सेटिंग शामिल होनी चाहिए।
इसके बाद, हमारे पास प्लगइन का मुख्य फ़ंक्शन Plugin() है। इस फ़ंक्शन को "constructor" से तुलना किया जा सकता है, जो इस स्थिति में, प्लगइन को इनिशियलाइज़ करना है और प्लगइन को तत्काल प्रदान करते समय किसी भी पारित होने के साथ डिफ़ॉल्ट सेटिंग्स को मर्ज करना है।
तीसरा खंड है, जहां हम अनंत स्क्रॉलिंग की कार्यक्षमता को पूरा करने के लिए अपने स्वयं के कार्यों का निर्माण करेंगे।
अंत में, चौथा खंड एक है जो संपूर्ण चीज़ को एक जेक्वीरी प्लगइन में कवर करना है।

इन सभी सेटों के साथ, अब हम हमारी जावास्क्रिप्ट रचना कर सकते हैं। और हम अपने प्लगइन के डिफ़ॉल्ट विकल्पों को परिभाषित करके शुरू करते हैं।

विकल्प

;( function( $, window, document, undefined ) {

	"use strict";

	var pluginName = "keepScrolling",
		 defaults = {
		 	floor: null,
			article: null,
			data: {}
		 };
	...

} )( jQuery, window, document );

जैसा कि आप ऊपर देख सकते हैं, हमने निर्धारित तीन विकल्प निर्धारित किए हैं:

floor: एक आईडी(id) चयनकर्ता-जैसे #floor या #footer- जिसका हम वेबसाइट या सामग्री के अंत पर विचार करते हैं। आमतौर पर, यह साइट पाद फुटर होगा।
article: एक क्लास सिलेक्टर जो आर्टिकल को कवर करता है।
data: चूंकि हमारे पास किसी भी बाह्य एपीआई तक पहुंच नहीं है (हमारी वेबसाइट स्थिर है) हमें आलेख डेटा का एक संग्रह, जैसे लेख URL, आईडी, और इस विकल्प तर्क के रूप में JSON प्रारूप में शीर्षक।

दी फंगक्शनस

यहां हमारे पास init() है। इस फ़ंक्शन में, हम कई कार्यों में जोड़ देंगे जो साइट आरंभीकरण के दौरान तुरंत चलाना होगा। उदाहरण के लिए, हम साइट का फर्श चुनते हैं।

$.extend( Plugin.prototype, {

	// The `init()` function.
	init: function() {
		this.siteFloor = $( this.settings.floor ); // select the element set as the site floor.
	},
} );

कुछ फंगक्शनस भी हैं जो हम आरंभीकरण के बाहर चलाएंगे। हम इन फ़ंक्शन को init फ़ंक्शन के बाद बनाने और जोड़ने के लिए जोड़ते हैं।

हम जिन कार्यों का पहला समूह लिखेंगे वे हम हैं जिन्हें हम "thing(चीज़)" प्राप्त करने या वापस लाने के लिए उपयोग करते हैं; स्ट्रिंग, एक ऑब्जेक्ट, या एक नंबर से कुछ जो प्लगइन में अन्य सभी फ़ंक्शन में पुन: प्रयोज्य होगा। इनमें चीजों में शामिल हैं:

पृष्ठ पर सभी लेख प्राप्त करें:

/**
 * Find and returns list of articles on the page.
 * @return {jQuery Object} List of selected articles.
 */
getArticles: function() {
	return $( this.element ).find( this.settings.article );
},

लेख का पता प्राप्त करें। वर्डप्रेस में, यह लोकप्रिय "पोस्ट स्लग" के रूप में जाना जाता है।

/**
 * Returns the article Address.
 * @param  {Integer} i The article index.
 * @return {String}    The article address, e.g. `post-two.html`
 */
getArticleAddr: function( i ) {

	var href = window.location.href;
	var root = href.substr( 0, href.lastIndexOf( "/" ) );

	return root + "/" + this.settings.data[ i ].address + ".html";
},

पुनः प्राप्त करने के लिए अगले लेख आईडी(id) और पता प्राप्त करें।

/**
 * Return the "next" article.
 * @return {Object} The `id` and `url` of the next article.
 */
getNextArticle: function() {

	// Select the last article.
	var $last = this.getArticles().last();

	var articlePrevURL;

	/**
	 * This is a simplified way to determine the content ID.
	 *
	 * Herein, we substract the last post ID by `1`.
	 * Ideally, we should be calling call an API endpoint, for example:
	 * https://www.techinasia.com/wp-json/techinasia/2.0/posts/329951/previous/
	 */
	var articleID = $last.data( "article-id" );
	var articlePrevID = parseInt( articleID, 10 ) - 1; // Previous ID

	// Loop into the Option `data`, and get the correspending Address.
	for ( var i = this.settings.data.length - 1; i >= 0; i-- ) {
		if ( this.settings.data[ i ].id === articlePrevID ) {
			articlePrevURL = this.getArticleAddr( i ) ;
		}
	}

	return {
		id: articlePrevID,
		url: articlePrevURL
	};
},

प्लगइन की उपयोगिता कार्य निम्न हैं; एक ऐसा कार्य जिसे एक विशेष "thing(चीज़)" करने के लिए जिम्मेदार है। इसमें शामिल है:

एक फ़ंक्शन जो बताता है कि कोई तत्व व्यूपोर्ट में प्रवेश कर रहा है या नहीं। हम इसे मुख्य रूप से यह बताते हैं कि परिभाषित साइट "floor(मंजिल)" व्यूपोर्ट के भीतर दिखाई दे रही है या नहीं।

/**
 * Detect whether the target element is visible.
 * https://stackoverflow.com/q/123999/
 *
 * @return {Boolean} `true` if the element in viewport, and `false` if not.
 */
isVisible: function() {
	if ( target instanceof jQuery ) {
		target = target[ 0 ];
	}

	var rect = target.getBoundingClientRect();

	return rect.bottom > 0 &&
		rect.right > 0 &&
		rect.left < ( window.innerWidth || document.documentElement.clientWidth ) &&
		rect.top < ( window.innerHeight || document.documentElement.clientHeight );
}, 

फ़ंक्शन निष्पादन को रोकता है जो एक समारोह; डिबेंस के रूप में जाना जाता है। जैसा कि पहले उल्लेख किया गया है, हम उपयोगकर्ता स्क्रॉलिंग गतिविधि से निपटेंगे जो कि बहुत अधिक दर पर होगा। इस प्रकार scroll इवेंट के भीतर एक फ़ंक्शन उपयोगकर्ता स्क्रॉलिंग के बाद अक्सर चलती है, जो सुस्त या लगी साइट पर स्क्रॉलिंग अनुभव को चालू कर देगा।

उपरोक्त डीबंस फ़ंक्शन निष्पादन आवृत्ति को कम करेगा। यह समारोह चलाने से पहले उपयोगकर्ता को स्क्रॉल करना बंद करने के बाद, wait पैरामीटर के माध्यम से, निर्दिष्ट समय की प्रतीक्षा करेंगे।

/**
 * Returns a function, that, as long as it continues to be invoked, will not b
 * triggered.
 * The function will be called after it stops being called for N milliseconds.
 * If immediate is passed, trigger the function on the leading edge, instead of
 * the trailing.
 *
 * @link https://davidwalsh.name/function-debounce
 * @link http://underscorejs.org/docs/underscore.html#section-83
 *
 * @param  {Function} func   	  Function to debounce
 * @param  {Integer}  wait      The time in ms before the Function run
 * @param  {Boolean}  immediate
 * @return {Void}
 */
isDebounced: function( func, wait, immediate ) {
	var timeout;

	return function() {

		var context = this,
		args = arguments;

		var later = function() {
			timeout = null;
			if ( !immediate ) {
				func.apply( context, args );
			}
		};

		var callNow = immediate && !timeout;

		clearTimeout( timeout );
		timeout = setTimeout( later, wait );

		if ( callNow ) {
			func.apply( context, args );
		}
	};
}, 

एक फ़ंक्शन जो निर्धारित करता है कि आगे बढ़ने या ऑपरेशन को रद्द करना है या नहीं।

/**
 * Whether to proceed ( or not to ) fetching a new article.
 * @return {Boolean} [description]
 */
isProceed: function() {

	if ( articleFetching // check if we are currently fetching a new content.
		  || articleEnding // check if no more article to load.
		  || !this.isVisible( this.siteFloor ) // check if the defined "floor" is visible.
		  ) {
		return;
	}

	if ( this.getNextArticle().id <= 0 ) {
		articleEnding = true;
		return;
	}

	return true;
},

हम पूर्ववर्ती उपयोगिता फ़ंक्शन का उपयोग करेंगे, isProceed(), यह जांचने के लिए कि सभी शर्तों को नई सामग्री खींचने के लिए आगे बढ़ना है या नहीं। यदि हां, तो जो फंगक्शन होगा, वह चल जाएगा, नई तत्व को लाएगा और आखिरी अनुच्छेद के बाद इसे जोड़ देगा।

/**
 * Function to fetch and append a new article.
 * @return {Void}
 */
fetch: function() {

	// Shall proceed or not?
	if ( !this.isProceed() ) {
		return;
	}

	var main = this.element;
	var $articleLast = this.getArticles().last();

	$.ajax( {
		url: this.getNextArticle().url,
		type: "GET",
		dataType: "html",
		beforeSend: function() {
			articleFetching = true;
		}
	} )

	/**
	 * When the request is complete and it successly
	 * retrieves the content, we append the content.
	 */
	.done( function( res ) {
		$articleLast
			.after( function() {
				if ( !res ) {
					return;
				}
				return $( res ).find( "#" + main.id ).html();
			} );
	} )

	/**
	 * When the function is complete, whether it `fail` or `done`,
	 * always set the `articleFetching` to false.
	 * It specifies that we are done fetching the new content.
	 */
	.always( function() {
		articleFetching = false;
	} );
},

इस फ़ंक्शन को init के अंदर जोड़ें। इसलिए फ़ंक्शन जल्द ही प्लग-इन प्रारंभ हो जायेगा, और तब शर्तों को पूरा होने पर नई सामग्री को पुनः प्राप्त करेगा।

1	init: function() {
2	this.siteFloor = $( this.settings.floor ); // select the element set as the site floor.
3	this.fetch();
4	},

अगला, हम इतिहास वेब एपीआई(API) के साथ ब्राउज़र इतिहास को बदलने के लिए एक फ़ंक्शन जोड़ देंगे। यह विशेष फंगक्शन हमारे पूर्ववर्ती कार्यों की अपेक्षा अधिक जटिल है। यहां मुश्किल भाग यह है कि जब हमें उपयोगकर्ता स्क्रॉल, दस्तावेज़ शीर्षक, साथ ही यूआरएल(URL) के दौरान इतिहास को बदलना चाहिए। फ़ंक्शन के पीछे के विचार को आसान बनाने में मदद करने के लिए निम्नलिखित एक उदाहरण है:

जैसा कि आप इस आंकड़े से देख सकते हैं, हमारे पास तीन रेखाएं हैं: "रूफ-लाइन", "मिड-लाइन", और "फ्लॉर -लाइन" जो कि व्यूपोर्ट के भीतर लेख की स्थिति को दर्शाती है। छवि दर्शाती है कि पहले लेख के नीचे, साथ ही साथ दूसरे लेख के शीर्ष, अब मिड-लाइन पर है। यह उपयोगकर्ता के इरादों को विशिष्ट नहीं बताता है कि वे किस लेख को देख रहे हैं; क्या यह पहली पोस्ट है या यह दूसरी पोस्ट है? इसलिए, हम ब्राउज़र इतिहास को तब नहीं बदलेंगे जब दो लेख इस स्थिति में हों।

हम इतिहास को अगले पश्चात रिकॉर्ड कर देंगे जब लेख शीर्ष "रूफ-लाइन" तक पहुंच जाएगा, क्योंकि यह व्यूपोर्ट के अधिकतर दृश्य भागों को लेता है।

हम पिछली पोस्ट के इतिहास को रिकॉर्ड करते हैं, जब इसके नीचे "फ्लॉर -लाइन" को हिट हो जाता है, इसी प्रकार, क्योंकि अब यह व्यूपोर्ट के सबसे अधिक दृश्य भाग लेता है।

यह "while" कोड है जिसमें आपको इसमें शामिल करने की आवश्यकता होगी:

init: function() {
	this.roofLine = Math.ceil( window.innerHeight * 0.4 ); // set the roofLine;
	this.siteFloor = $( this.settings.floor );
	this.fetch();
},
/**
 * Change the browser history.
 * @return {Void}
 */
history: function() {

	if ( !window.History.enabled ) {
		return;
	}

	this.getArticles()
		.each( function( index, article ) {

			var scrollTop = $( window ).scrollTop();
			var articleOffset = Math.floor( article.offsetTop - scrollTop );

			if ( articleOffset > this.threshold ) {
				return;
			}

			var articleFloor = ( article.clientHeight - ( this.threshold * 1.4 ) );
				 articleFloor = Math.floor( articleFloor * -1 );

			if ( articleOffset < articleFloor ) {
				return;
			}

			var articleID = $( article ).data( "article-id" );
				 articleID = parseInt( articleID, 10 );

			var articleIndex;
			for ( var i = this.settings.data.length - 1; i >= 0; i-- ) {
				if ( this.settings.data[ i ].id === articleID ) {
					articleIndex = i;
				}
			}

			var articleURL = this.getArticleAddr( articleIndex );

			if ( window.location.href !== articleURL ) {
				var articleTitle = this.settings.data[ articleIndex ].title;
				window.History.pushState( null, articleTitle, articleURL );
			}
		}.bind( this ) );
},

अन्त में, हम ऐसा फ़ंक्शन बनाते हैं जो fetch() और history() चलाएंगे जब उपयोगकर्ता पृष्ठ स्क्रॉल कर रहा होगा। ऐसा करने के लिए हम scroller() नामक एक नया फ़ंक्शन बनाते हैं, और इसे प्लग इन आरंभीकरण पर चलाते हैं।

/**
 * Functions to run during the scroll.
 * @return {Void}
 */
scroller: function() {
	window.addEventListener( "scroll", this.isDebounced( function() {
		this.fetch();
		this.history();
	}, 300 ).bind( this ), false );
}

और जैसा कि आप ऊपर देख सकते हैं,हम debounce को एजेएक्स का प्रदर्शन करते हैं और ब्राउज़र इतिहास बदलते हैं क्योंकि इन्हें एक महंगा ऑपरेशन होता है।

तत्व प्लेसहोल्डर जोड़ना

यह वैकल्पिक है, लेकिन उपयोगकर्ता अनुभव का सम्मान करने के लिए अनुशंसित है। प्लेसहोल्डर उपयोगकर्ता को प्रतिक्रिया देता है, संकेत देता है कि एक नया लेख उसके रास्ते पर है।

सबसे पहले, हम प्लेसहोल्डर टेम्पलेट बनाते हैं। सामान्य तौर पर इस प्रकार का टेम्पलेट साइट पाद लेख के बाद रखा जाता है।

<script type="text/template" id="tmpl-placeholder">
	<div class="placeholder placeholder--article" id="placeholder-article">
		<div class="container">
			<div class="placeholder__header animated">
				<h1></h1>
			</div>
			<div>
				<p class="placeholder__p-1 animated"></p>
				<p class="placeholder__p-2 animated"></p>
			</div>
		</div>
	</div>
</script>

ध्यान रखें कि प्लेसहोल्डर लेख, इसकी संरचना, आपके ब्लॉग की वास्तविक सामग्री के समान होना चाहिए। एचटीएमएल संरचना तदनुसार समायोजित करें।

प्लेसहोल्डर शैलियों सरल है। इसमें सभी मूलभूत शैलियों को वास्तविक लेख की तरह रखना है, एनीमेशन @keyframe जो लदान की भावना का अनुकरण करती है, और दृश्यता को टॉगल करने के लिए शैली (प्लेसहोल्डर शुरू में छुपा हुआ है, यह केवल तभी दिखाया जाता है जब मूल तत्व को आकर्षित करना होता है fetching क्लैस)।

.placeholder {
	color: @gray-light;
	padding-top: 60px;
	padding-bottom: 60px;
	border-top: 6px solid @gray-lighter;
	display: none;
	.fetching & {
		display: block;
	}
	p {
		display: block;
		height: 20px;
		background: @gray-light;
	}
	&__header {
		animation-delay:.1s;
		h1 {
			height: 30px;
			background-color: @gray-light;
		}
	}
	&__p-1 {
		animation-delay:.2s;
		width: 80%;
	}
	&__p-2 {
		animation-delay:.3s;
		width: 70%;
	}
}

फिर हम AJAX अनुरोध के दौरान प्लेसहोल्डर को दिखाने के लिए कुछ पंक्तियों को अपडेट करते हैं, निम्नानुसार।

/**
 * Initialize.
 * @return {Void}
 */
init: function() {

	this.roofLine = Math.ceil( window.innerHeight * 0.4 );
	this.siteFloor = $( this.settings.floor );

	this.addPlaceholder();

	this.fetch();
	this.scroller();
},

/**
 * Append the addPlaceholder.
 * Placeholder is used to indicate a new post is being loaded.
 * @return {Void}
 */
addPlaceholder: function() {

	var tmplPlaceholder = document.getElementById( "tmpl-placeholder" );
		 tmplPlaceholder = tmplPlaceholder.innerHTML;

		$( this.element ).append( tmplPlaceholder );
},

/**
 * Function to fetch and append a new article.
 * @return {Void}
 */
fetch: function() {
	...

	// Select the element wrapping the article.
	var main = this.element;

	$.ajax( {

		...

		beforeSend: function() {

			...
			// Add the 'fetching' class.
			$( main ).addClass( function() {
				return "fetching";
			} );
		}
	} )

	...

	.always( function() {

		...
		// Remove the 'fetching' class.
		$( main ).removeClass( function() {
			return "fetching";
		} );
	} );

इसी तरह हम प्लेसहोल्डर को संभालते हैं! हमारा प्लगइन पूरा हो गया है, और यह प्लगइन को परिनियोजित करने का समय है।

डिप्लॉयमेंट

प्लगइन की डिप्लॉयिंग काफी आसान है। हम उस तत्व को निर्दिष्ट करते हैं जो हमारे ब्लॉग लेख को छिपाते हैं, और हमारे प्लगइन को विकल्प सेट के साथ कहते हैं, जैसा कि निम्न है।

$( document ).ready( function() {
	$( "#main" ).keepScrolling({
		floor: "#footer",
		article: ".article",
		data : [{
			"id": 1,
			"address": "post-one",
			"title": "Post One"
		}, {
			"id": 2,
			"address": "post-two",
			"title": "Post Two"
		}, {
			"id": 3,
			"address": "post-three",
			"title": "Post Three"
		}, {
			"id": 4,
			"address": "post-four",
			"title": "Post Four"
		}, {
			"id": 5,
			"address": "post-five",
			"title": "Post Five"
		}]
	});
} );

अनंत स्क्रॉल अब कार्य करना चाहिए।

केवीऐट : वापस बटन

इस ट्यूटोरियल में, हमने एक अनंत स्क्रॉल अनुभव बनाया है; कुछ ऐसा है जिसे हम आमतौर पर क्वार्ट्ज, टेकिनिया और कई मोबाइल एप्लिकेशन जैसे समाचार साइटों पर देखा करते थे।

यद्यपि यह उपयोगकर्ता सगाई को बनाए रखने का एक प्रभावी तरीका साबित हुआ है, लेकिन इसमें भी नकारात्मक प्रभाव पड़ता है: यह ब्राउज़र में "बैक" बटन को तोड़ता है। जब आप बटन पर क्लिक करते हैं, तो यह आपको पिछली पिछली विज़िट की गई तत्व या पृष्ठ पर वापस स्क्रॉल नहीं करेगा।

वेबसाइट विभिन्न तरीकों से इस मुद्दे का समाधान करते हैं; क्वार्ट्ज, उदाहरण के लिए, आपको निर्दिष्ट(referred) यूआरएल पर भेज देगा; वह यूआरएल जो आपने पहले देखा है, लेकिन वेब इतिहास एपीआई के माध्यम से रिकॉर्ड किए गए एक नहीं। TechInAsia बस आपको वापस होमपेज पर ले जाएगा।

रैपिंग अप

यह ट्यूटोरियल कई चीजों को कवर करने में लंबा है! उनमें से कुछ समझना आसान है, जबकि कुछ टुकड़े पचाने में आसान नहीं हो सकते हैं। मदद करने के लिए, मैंने इस आलेख के पूरक के रूप में संदर्भों की एक सूची डाल दी है।

अंत में, पूर्ण स्रोत कोड पर गौर करें और डेमो देखें!