अनंत स्क्रोलिंग सुधारत आहे. jQuery सह आळशी स्क्रोलिंग करणे

नोकिया

9 फेब्रुवारी 2013 रोजी रात्री 9:42 वाजता भरती करा मला पूर्णपणे फिरवा. अनंत स्क्रोलिंगसह प्रतिसादात्मक मांडणी

• कपाट*

काही काळापूर्वी मला एक समस्या आली:
- अनुकूली लेआउटचे लेआउट. विंडोचा आकार बदलताना, पृष्ठावरील घटक एका विशिष्ट रुंदीपर्यंत मोजले जातात. जर रुंदी किमान पेक्षा कमी असेल तर, एका ओळीतील घटकांची संख्या लहान होते, त्याच वेळी संपूर्ण स्क्रीन रुंदीमध्ये भरते. अर्थ स्पष्ट आहे - पृष्ठ कोणत्याही मॉनिटरवर पाहिले पाहिजे, यासह. मोबाइल उपकरणांवर.
- पृष्ठ स्क्रोल करताना सामग्री लोड केली जाते, त्यामुळे सामग्रीचा फक्त काही भाग प्रदर्शित केला जातो, बाकीचे लोड केले जाते जसे आपण खाली स्क्रोल करता (व्हीके भिंतीशी समान).
- प्रत्येक घटकाच्या पारदर्शकतेमध्ये गुळगुळीत वाढीसह, पृष्ठावरील घटकांचे स्वरूप बदलते. पहिला घटक अपारदर्शक झाल्यानंतर, प्रभाव पुढील घटकांवर लागू होतो... आणि असेच सर्वांसाठी.

मला रेडीमेड उपाय सापडला नाही, मला सुरवातीपासून सर्व काही लिहावे लागले. कदाचित हे संपूर्ण वैशिष्ट्य निरुपयोगी आहे, परंतु जर ते अचानक एखाद्यासाठी उपयुक्त ठरले तर ते वापरा, त्याची चाचणी घ्या, त्याचा आनंद घ्या:

HTML चाचणीसाठी, मी पटकन एक अतिशय सोपी मांडणी एकत्र केली. बर्याच काळासाठी शैलींचा त्रास होऊ नये म्हणून, मी बूटस्ट्रॅप कनेक्ट केला. येथे मार्कअप आहे:
हॅलो वर्ल्ड! // तत्वतः, तुम्ही वर्ग सुरू करू शकता येथे नाही, आणि पॅरामीटर्सशिवाय. याबद्दल अधिक नंतर.

// कंटेनर जेथे सर्व घटक प्रदर्शित केले जातात.
// आमच्या बाबतीत, प्रत्येक आयटम पृष्ठावरील एक स्वतंत्र घटक आहे. आम्ही त्यापैकी बरेच बाहेर आणू.

// ... अनेक, अनेक वस्तू // आम्ही साफसफाई करतो, कारण आमच्या आयटमला फ्लोट:लेफ्ट आहे
GALLERY = ( // डीफॉल्ट पॅरामीटर्स सेट करा जे आरंभिकरण दरम्यान अधिलिखित केले जाऊ शकतात. कंटेनर: "section.container", // मूळ कंटेनर आयटम: "section.item", // वेगळे गॅलरी घटक img: "section.item > img. लपवलेले ", // प्रतिमा जी आम्ही सुरुवातीला "लपवू" मध्यांतर: 200, // पारदर्शकता प्रभाव संख्या विलंब: 5, // init जोडण्यासाठी घटकांची संख्या: function(params) ( var _self = this; // Overriding पॅरामीटर्स (हे पास केले असल्यास. नसल्यास, डीफॉल्ट वापरा.) if(params != undefined)( साठी (params मध्ये var की) ( _self = params; ) ) _self.setUp()), सेटअप: function() ( var _self = this; // आम्ही इव्हेंट हँडलर हँग अप करतो. आमच्या बाबतीत, विंडोला त्यांची आवश्यकता असते (आकार बदला) $(window).bind("resize", function())( _self.adjust(); )); $(document).ready(function())( _self.adjust(); _self.play(); )); // ... मूळ ब्लॉक $(_self.container).bind("scroll" मध्ये स्क्रोल करण्यासाठी , फंक्शन ()( _self.checkScroll(); जर मूळ ब्लॉक // मधील अनुलंब स्क्रोलिंग शक्य तितके असेल तर आम्ही नवीन सामग्रीसाठी विनंती पाठवू. // अशा प्रकारे, सामग्री लोड करणे केवळ तेव्हाच केले जाईल जेव्हा आम्ही // पृष्ठ शेवटपर्यंत स्क्रोल केले.

CSS. येथे सर्व काही फक्त अपमानकारक आहे. कनेक्टेड बूटस्ट्रॅप, सामग्रीसाठी अनेक शैली सेट करा - आणि तुम्ही जा!
@import url("bootstrap.css"); body (पार्श्वभूमी: #000; ) विभाग.कंटेनर (स्थिती: परिपूर्ण; शीर्ष: 50px; तळ: 50px; रुंदी: 100%; ओव्हरफ्लो: ऑटो;) विभाग.कंटेनर > विभाग. आयटम (स्थिती: सापेक्ष; फ्लोट: डावीकडे; समास: 0; पॅडिंग: 140px ओव्हरफ्लो: hidden;) विभाग.< $items_on_page; $i++) { $html .= "जे.एस. इथेच ते मनोरंजक बनते. सुरुवातीला मी फंक्शन्स स्वतंत्रपणे लिहिली, नंतर, जेव्हा सर्वकाही कार्य करते, तेव्हा मी त्यांना एका वर्गात एकत्र केले
PHP. येथे सर्व काही आदिम आहे, फक्त चाचणीसाठी.
var आयटम = $(_self.container).find(_self.img); var start = items.length; // आणि विनंतीमध्ये पास करा: data: ("count": _self.count, "start": start), // ... नंतर डेटा पुनर्प्राप्त करताना..." LIMIT " निर्दिष्ट करा. (int)$_POST["प्रारंभ"] . ", " . $items_on_page;

अशा प्रकारे "पृष्ठांकनाशिवाय पृष्ठांकन" निघाले, परंतु रबर पृष्ठावर. येथे कार्यरत उदाहरण.

जोपर्यंत मला आठवते, वेब डेव्हलपर नेहमी चांगल्या जुन्या पद्धतीच्या पृष्ठांकनाकडे वळतात जेव्हा त्यांना मोठ्या प्रमाणात सामग्री प्रदर्शित करण्याची आवश्यकता असते. मला चुकीचे समजू नका, पृष्ठांकन हा सामग्री प्रदर्शित करण्याचा अद्याप एक प्रभावी मार्ग आहे, परंतु या लेखात आपण एका वेगळ्या पद्धतीबद्दल बोलू - आळशी स्क्रोलिंग, ज्याला अनंत स्क्रोलिंग देखील म्हणतात आणि पृष्ठांकन नाही. या तंत्राने, जेव्हा वापरकर्ता लोड केलेली सामग्री समाप्त होते त्या बिंदूपर्यंत पृष्ठ स्क्रोल करतो तेव्हा AJAX वापरून सामग्री लोड केली जाते. आळशी स्क्रोलिंगचा वापर Facebook आणि Pinterest सारख्या काही इंटरनेट दिग्गजांकडून केला जातो. या पोस्टमध्ये आम्ही jQuery वापरून आमचे स्वतःचे आळशी लोडिंग प्लगइन लागू करण्याचा प्रयत्न करू.

फायदे आणि तोटे

या पद्धतीचे फायदे स्पष्ट आहेत. सामग्रीचा अतिरिक्त भाग मिळविण्यासाठी, आपल्याला दुसऱ्या पृष्ठावर जाण्याची आवश्यकता नाही, जे आपले लक्ष देखील गोंधळात टाकते आणि पृष्ठाचे दुसरे क्षेत्र पाहण्यास भाग पाडते. आळशी लोडिंग वैशिष्ट्य जोडून, ​​आपण वाचन करताना वापरकर्त्याचे लक्ष त्याच क्षेत्रावर ठेवता.

आळशी लोडिंग सर्व परिस्थितींमध्ये प्रभावी नाही. उदाहरणार्थ, जेव्हा वापरकर्ता दुव्यावर क्लिक करतो आणि नंतर ब्राउझर इतिहास वापरून मागील पृष्ठावर परत येऊ इच्छितो तेव्हा तो AJAX वापरून लोड केलेल्या भागामध्ये स्थान गमावतो. या समस्येचे निराकरण करण्याचा एक मार्ग म्हणजे सर्व लिंक्स नवीन विंडो किंवा टॅबमध्ये उघडणे.

याव्यतिरिक्त, आपण हे तंत्रज्ञान वापरण्याचा निर्णय घेण्यापूर्वी, हे लक्षात ठेवा की शोध इंजिन अशा उपायांसाठी फारशी अनुकूल नाहीत. शोध इंजिनांना सामग्री दृश्यमान होण्याची समस्या टाळण्यासाठी, तुम्ही पृष्ठांकन किंवा साइटमॅपसह पर्याय देऊ शकता याची खात्री करा.

चला सुरुवात करूया

चला अगदी सोप्या पानाचे रेखाटन करून सुरुवात करूया. पृष्ठाचे सर्वात महत्वाचे भाग खालील कोडमध्ये दर्शविले आहेत. संपूर्ण फायली स्त्रोतांमध्ये पाहिल्या जाऊ शकतात.

HTML

नमस्कार! मी पहिला घटक आहे नमस्कार! मी दुसरा घटक आहे नमस्कार! मी तिसरा घटक आहे त्यामुळे हे कंटाळवाणे होत आहे... चला काहीतरी नवीन करण्याचा प्रयत्न करूया AJAX द्वारे अधिक घटक कसे लोड करावे अधिक घटक लोड करण्यासाठी खालील बटणावर क्लिक करा लोड अधिक लोडिंग अधिक घटक

CSS

#data-container ( समास: 10px; ) #data-container .data-item (पार्श्वभूमी-रंग: #444444; सीमा-त्रिज्या: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; पॅडिंग: 5px; रंग: #fff; रुंदी: 200px; उंची: 50px;

की नोट्स

आम्ही तयार केलेल्या दस्तऐवजावर तुम्ही बारकाईने नजर टाकल्यास, तुम्ही “अधिक लोड करा” बटणावर क्लिक केल्यावर नवीन पोस्ट लोड केल्या जातील. आम्ही अंमलात आणू असे मुद्दे येथे आहेत:

• आम्हाला URL ला विनंती करणे आवश्यक आहे, जे आम्हाला पृष्ठावर समाविष्ट करणे आवश्यक असलेल्या घटकांची सूची देईल
• प्रत्येक वेळी बटण क्लिक केल्यावर ही प्रक्रिया पुनरावृत्ती केली पाहिजे, परंतु परिणामी नवीन पोस्ट परत केल्या पाहिजेत
• जोपर्यंत परत करण्यासारखे काहीतरी आहे तोपर्यंत प्रत्येक विनंतीसाठी नवीन पोस्ट जारी केल्या पाहिजेत
• जेव्हा आणखी पोस्ट्स शिल्लक नसतील, तेव्हा वापरकर्त्याला कळवणे आवश्यक आहे की तो शेवटपर्यंत पोहोचला आहे

AJAX प्रतिसाद टेम्पलेट्स

आदर्शपणे, आम्हाला एक व्हेरिएबल घोषित करणे आवश्यक आहे ज्यामध्ये आम्ही पृष्ठ क्रमांक संचयित करू आणि आम्ही विनंती पाठवू ती URL निश्चित करण्यासाठी या क्रमांकाचा वापर करू. आमच्या डेमोमध्ये आमच्याकडे अशी तीन पृष्ठे असतील: 2.html, 3.html आणि एक रिक्त पृष्ठ 4.html.

जेव्हा तुम्ही डेटाचा पुढील भाग डाउनलोड करण्यासाठी बटणावर क्लिक करता, तेव्हा विनंती पाठवल्यापासून आणि प्रतिसाद प्राप्त झाल्यापासून काही वेळ निघून जातो. या प्रकरणात, आम्ही डाउनलोड बटण लपवू आणि त्याऐवजी घटक डाउनलोड केले जात असल्याचे दर्शविणारा काही मजकूर दर्शवू:

प्राप्त डेटा पृष्ठावर जोडत आहे

प्रथम, विनंती चालू असताना आम्ही केलेले बदल परत करूया, म्हणजेच “अधिक लोड करा” बटण दाखवा आणि माहितीचा मजकूर लपवा. दुसरे म्हणजे, पृष्ठावर आधीपासूनच असलेल्या घटकांनंतर, आपल्याला पृष्ठावर प्राप्त केलेला डेटा घालण्याची आवश्यकता आहे. लक्षात घ्या की साधेपणासाठी, या उदाहरणात आम्हाला विनंतीचा परिणाम म्हणून लगेच HTML डेटा मिळतो. तुम्ही JSON फॉरमॅटमध्ये प्रतिसाद पाठवू शकता, त्यात अतिरिक्त व्हेरिएबल्स जोडू शकता, जसे की स्टेटस किंवा मेसेज. डेटा दर कोड खाली दर्शविला आहे:

$(buttonId).शो(); $(लोडिंग आयडी).लपवा(); $(प्रतिसाद).appendTo($(कंटेनर)); पृष्ठ += 1;

डेटा संपल्यावर पर्यायावर प्रक्रिया करणे

एकदा तुम्ही शेवटच्या पोस्टवर पोहोचल्यावर, तुम्हाला वापरकर्त्याला दर्शविणे आवश्यक आहे की आणखी पोस्ट नाहीत. हे विविध प्रकारे केले जाऊ शकते. तुम्ही प्रतिसादात एम्बेडेड कोड किंवा संदेश म्हणून स्थिती पाठवू शकता. आम्ही या उदाहरणात थेट HTML मार्कअप वापरत असल्याने, आमच्या बाबतीत रिकामा प्रतिसाद डेटा संपल्याचे सूचित करेल.

$.ajax((... यश: फंक्शन(प्रतिसाद) ( // प्रतिसाद रिक्त असल्यास क्रिया (response.trim() == "") ( $(buttonId).fadeOut(); $(loadingId).text ("लोड करण्यासाठी आणखी नोंदी नाहीत!" // उत्तर बरोबर असल्यास), ... ));

निष्कर्ष

या डेमोमध्ये आम्ही आळशी लोडिंगची अतिशय मूलभूत अंमलबजावणी प्रदान केली आहे. नक्कीच, आपण प्रयत्न केल्यास आपण बरेच चांगले करू शकता. सुरुवातीच्यासाठी, तुम्ही बटण पूर्णपणे काढून टाकू शकता आणि जेव्हा वापरकर्ता पृष्ठाच्या तळाशी स्क्रोल करतो तेव्हा विनंती पाठवू शकता. हे वापरकर्त्याला बटण दाबण्याच्या अतिरिक्त गरजेपासून वाचवेल आणि सामान्यत: माहिती पाहण्याच्या प्रक्रियेला गती देईल. दुसरे म्हणजे, तुम्ही फक्त JSON फॉरमॅटमध्ये कच्चा डेटा पाठवू शकता आणि jQuery वापरून फ्लायवर मार्कअप तयार करू शकता, उदाहरणार्थ:

$.each(response.items, function(index, value) ( ​​$("", ( "वर्ग" : "डेटा-आयटम", "मजकूर" : मूल्य)); ));

शेवटी, JSON प्रतिसादात विनंती यशस्वी झाली की नाही हे सूचित करणारा संदेश असू शकतो; डेटा; तसेच डाउनलोड करण्यासाठी आणखी पोस्ट्स आहेत की नाही याबद्दल माहिती. या प्रकरणात, निकाल पाठविण्याचा हा एक अधिक कार्यक्षम मार्ग आहे.

जोपर्यंत मला आठवते, वेब डेव्हलपर नेहमी चांगल्या जुन्या पद्धतीच्या पृष्ठांकनाकडे वळतात जेव्हा त्यांना मोठ्या प्रमाणात सामग्री प्रदर्शित करण्याची आवश्यकता असते. मला चुकीचे समजू नका, पृष्ठांकन हा सामग्री प्रदर्शित करण्याचा अद्याप एक प्रभावी मार्ग आहे, परंतु या लेखात आपण एका वेगळ्या पद्धतीबद्दल बोलू - आळशी स्क्रोलिंग, ज्याला अनंत स्क्रोलिंग देखील म्हणतात आणि पृष्ठांकन नाही. या तंत्राने, जेव्हा वापरकर्ता लोड केलेली सामग्री समाप्त होते त्या बिंदूपर्यंत पृष्ठ स्क्रोल करतो तेव्हा AJAX वापरून सामग्री लोड केली जाते. आळशी स्क्रोलिंगचा वापर Facebook आणि Pinterest सारख्या काही इंटरनेट दिग्गजांकडून केला जातो. या पोस्टमध्ये आम्ही jQuery वापरून आमचे स्वतःचे आळशी लोडिंग प्लगइन लागू करण्याचा प्रयत्न करू.

फायदे आणि तोटे

या पद्धतीचे फायदे स्पष्ट आहेत. सामग्रीचा अतिरिक्त भाग मिळविण्यासाठी, आपल्याला दुसऱ्या पृष्ठावर जाण्याची आवश्यकता नाही, जे आपले लक्ष देखील गोंधळात टाकते आणि पृष्ठाचे दुसरे क्षेत्र पाहण्यास भाग पाडते. आळशी लोडिंग वैशिष्ट्य जोडून, ​​आपण वाचन करताना वापरकर्त्याचे लक्ष त्याच क्षेत्रावर ठेवता.

आळशी लोडिंग सर्व परिस्थितींमध्ये प्रभावी नाही. उदाहरणार्थ, जेव्हा वापरकर्ता दुव्यावर क्लिक करतो आणि नंतर ब्राउझर इतिहास वापरून मागील पृष्ठावर परत येऊ इच्छितो तेव्हा तो AJAX वापरून लोड केलेल्या भागामध्ये स्थान गमावतो. या समस्येचे निराकरण करण्याचा एक मार्ग म्हणजे सर्व लिंक्स नवीन विंडो किंवा टॅबमध्ये उघडणे.

याव्यतिरिक्त, आपण हे तंत्रज्ञान वापरण्याचा निर्णय घेण्यापूर्वी, हे लक्षात ठेवा की शोध इंजिन अशा उपायांसाठी फारशी अनुकूल नाहीत. शोध इंजिनांना सामग्री दृश्यमान होण्याची समस्या टाळण्यासाठी, तुम्ही पृष्ठांकन किंवा साइटमॅपसह पर्याय देऊ शकता याची खात्री करा.

चला सुरुवात करूया

चला अगदी सोप्या पानाचे रेखाटन करून सुरुवात करूया. पृष्ठाचे सर्वात महत्वाचे भाग खालील कोडमध्ये दर्शविले आहेत. संपूर्ण फायली स्त्रोतांमध्ये पाहिल्या जाऊ शकतात.

HTML

नमस्कार! मी पहिला घटक आहे नमस्कार! मी दुसरा घटक आहे नमस्कार! मी तिसरा घटक आहे त्यामुळे हे कंटाळवाणे होत आहे... चला काहीतरी नवीन करण्याचा प्रयत्न करूया AJAX द्वारे अधिक घटक कसे लोड करावे अधिक घटक लोड करण्यासाठी खालील बटणावर क्लिक करा लोड अधिक लोडिंग अधिक घटक

CSS

#data-container ( समास: 10px; ) #data-container .data-item (पार्श्वभूमी-रंग: #444444; सीमा-त्रिज्या: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; पॅडिंग: 5px; रंग: #fff; रुंदी: 200px; उंची: 50px;

की नोट्स

आम्ही तयार केलेल्या दस्तऐवजावर तुम्ही बारकाईने नजर टाकल्यास, तुम्ही “अधिक लोड करा” बटणावर क्लिक केल्यावर नवीन पोस्ट लोड केल्या जातील. आम्ही अंमलात आणू असे मुद्दे येथे आहेत:

• आम्हाला URL ला विनंती करणे आवश्यक आहे, जे आम्हाला पृष्ठावर समाविष्ट करणे आवश्यक असलेल्या घटकांची सूची देईल
• प्रत्येक वेळी बटण क्लिक केल्यावर ही प्रक्रिया पुनरावृत्ती केली पाहिजे, परंतु परिणामी नवीन पोस्ट परत केल्या पाहिजेत
• जोपर्यंत परत करण्यासारखे काहीतरी आहे तोपर्यंत प्रत्येक विनंतीसाठी नवीन पोस्ट जारी केल्या पाहिजेत
• जेव्हा आणखी पोस्ट्स शिल्लक नसतील, तेव्हा वापरकर्त्याला कळवणे आवश्यक आहे की तो शेवटपर्यंत पोहोचला आहे

AJAX प्रतिसाद टेम्पलेट्स

आदर्शपणे, आम्हाला एक व्हेरिएबल घोषित करणे आवश्यक आहे ज्यामध्ये आम्ही पृष्ठ क्रमांक संचयित करू आणि आम्ही विनंती पाठवू ती URL निश्चित करण्यासाठी या क्रमांकाचा वापर करू. आमच्या डेमोमध्ये आमच्याकडे अशी तीन पृष्ठे असतील: 2.html, 3.html आणि एक रिक्त पृष्ठ 4.html.

जेव्हा तुम्ही डेटाचा पुढील भाग डाउनलोड करण्यासाठी बटणावर क्लिक करता, तेव्हा विनंती पाठवल्यापासून आणि प्रतिसाद प्राप्त झाल्यापासून काही वेळ निघून जातो. या प्रकरणात, आम्ही डाउनलोड बटण लपवू आणि त्याऐवजी घटक डाउनलोड केले जात असल्याचे दर्शविणारा काही मजकूर दर्शवू:

प्राप्त डेटा पृष्ठावर जोडत आहे

प्रथम, विनंती चालू असताना आम्ही केलेले बदल परत करूया, म्हणजेच “अधिक लोड करा” बटण दाखवा आणि माहितीचा मजकूर लपवा. दुसरे म्हणजे, पृष्ठावर आधीपासूनच असलेल्या घटकांनंतर, आपल्याला पृष्ठावर प्राप्त केलेला डेटा घालण्याची आवश्यकता आहे. लक्षात घ्या की साधेपणासाठी, या उदाहरणात आम्हाला विनंतीचा परिणाम म्हणून लगेच HTML डेटा मिळतो. तुम्ही JSON फॉरमॅटमध्ये प्रतिसाद पाठवू शकता, त्यात अतिरिक्त व्हेरिएबल्स जोडू शकता, जसे की स्टेटस किंवा मेसेज. डेटा दर कोड खाली दर्शविला आहे:

$(buttonId).शो(); $(लोडिंग आयडी).लपवा(); $(प्रतिसाद).appendTo($(कंटेनर)); पृष्ठ += 1;

डेटा संपल्यावर पर्यायावर प्रक्रिया करणे

एकदा तुम्ही शेवटच्या पोस्टवर पोहोचल्यावर, तुम्हाला वापरकर्त्याला दर्शविणे आवश्यक आहे की आणखी पोस्ट नाहीत. हे विविध प्रकारे केले जाऊ शकते. तुम्ही प्रतिसादात एम्बेडेड कोड किंवा संदेश म्हणून स्थिती पाठवू शकता. आम्ही या उदाहरणात थेट HTML मार्कअप वापरत असल्याने, आमच्या बाबतीत रिकामा प्रतिसाद डेटा संपल्याचे सूचित करेल.

$.ajax((... यश: फंक्शन(प्रतिसाद) ( // प्रतिसाद रिक्त असल्यास क्रिया (response.trim() == "") ( $(buttonId).fadeOut(); $(loadingId).text ("लोड करण्यासाठी आणखी नोंदी नाहीत!" // उत्तर बरोबर असल्यास), ... ));

निष्कर्ष

या डेमोमध्ये आम्ही आळशी लोडिंगची अतिशय मूलभूत अंमलबजावणी प्रदान केली आहे. नक्कीच, आपण प्रयत्न केल्यास आपण बरेच चांगले करू शकता. सुरुवातीच्यासाठी, तुम्ही बटण पूर्णपणे काढून टाकू शकता आणि जेव्हा वापरकर्ता पृष्ठाच्या तळाशी स्क्रोल करतो तेव्हा विनंती पाठवू शकता. हे वापरकर्त्याला बटण दाबण्याच्या अतिरिक्त गरजेपासून वाचवेल आणि सामान्यत: माहिती पाहण्याच्या प्रक्रियेला गती देईल. दुसरे म्हणजे, तुम्ही फक्त JSON फॉरमॅटमध्ये कच्चा डेटा पाठवू शकता आणि jQuery वापरून फ्लायवर मार्कअप तयार करू शकता, उदाहरणार्थ:

$.each(response.items, function(index, value) ( ​​$("", ( "वर्ग" : "डेटा-आयटम", "मजकूर" : मूल्य)); ));

शेवटी, JSON प्रतिसादात विनंती यशस्वी झाली की नाही हे सूचित करणारा संदेश असू शकतो; डेटा; तसेच डाउनलोड करण्यासाठी आणखी पोस्ट्स आहेत की नाही याबद्दल माहिती. या प्रकरणात, निकाल पाठविण्याचा हा एक अधिक कार्यक्षम मार्ग आहे.

2011 मध्ये, तुमच्या वेबसाइट्सवर "अंतहीन स्क्रोलिंग" तयार करणे खूप फॅशनेबल होते (माझ्या मते, ही फॅशन Facebook वरून आली आहे): जेव्हा वापरकर्ता माउस व्हील वळवतो आणि वळतो तेव्हा हे होते आणि सर्व नवीन शोध परिणाम Ajax द्वारे लोड केले जातात. पृष्ठाच्या तळाशी, सामान्य स्क्रोलिंगला अंतहीन बनवते आणि प्रथमच याचा सामना करणाऱ्या वापरकर्त्यामध्ये "संज्ञानात्मक विसंगती" निर्माण करते.

मी अलीकडे या साइटवर एक लेख देखील पाहिला ज्यामध्ये लेखकाने "अंतहीन स्क्रोलिंग" बद्दल असमाधान व्यक्त केले आणि चांगले जुने "पृष्ठांकन" वापरण्याचे आवाहन केले.

मी लेखकाशी सहमत आहे. मी स्वतः ड्रग्ज व्यसनी आहे, आणि कधीकधी मी मॉनिटरवर बसतो, मंत्रमुग्ध होऊन, काचेच्या डोळ्यांनी, फिरत असतो, फिरत असतो, जादूचे चक्र फिरवतो, कामावर/कामावर/दुकानात/खाणे/पिणे/शौचालयात जाऊ शकत नाही. , आणि मी ते एकाच विचाराने फिरवतो: "बरं, तुम्ही सर्व कधी संपवाल?!" (तुम्ही काय करू शकता - मला गोष्टी पूर्ण करण्याची सवय आहे).

एके दिवशी सकाळी मी उठलो आणि ठामपणे ठरवलं: “हे सहन करायचं थांबव!”

मी तुम्हाला माझी छोटी स्क्रिप्ट सादर करतो, जी मी माझ्या “सोशल नेटवर्क” (ब्लॅकजॅक आणि वेश्यांसह) साठी अलीकडेच लिहिली आहे.

डेमो पाहण्यासाठी, संग्रहण डाउनलोड करा आणि "test/test.html" फाइल चालवा.

ही स्क्रिप्ट कोणती नवकल्पना देते:

त्यांनी मुख्य "स्क्रोलबार" अस्पष्ट गोष्टीत बदलल्यामुळे, आम्हाला सामान्य "स्क्रोलबार" परत करणे आवश्यक आहे, जे आम्ही नियमित "स्क्रोलबार" च्या डाव्या बाजूला, पृष्ठाच्या उजव्या बाजूला एक राखाडी पट्टी रेखाटून केले.

शीर्षस्थानी ही पट्टी किती अंतरावर पोहोचली आहे हे आम्ही आधीच किती नमुने स्क्रोल केले आहे. सर्वसाधारणपणे, ही पट्टी काळ्या रंगाची असते. जिथे ते राखाडी आहे ते संपूर्ण नमुन्यातील स्थान आहे जिथे आपण आता आहोत.

कृपया हे देखील लक्षात घ्या की तुम्ही स्क्रोल करताच पेजचा पत्ता बदलतो. त्यामुळे तुम्ही आज संध्याकाळपर्यंत अर्धवट स्क्रोल करू शकता, पृष्ठ बुकमार्क करू शकता, संगणक बंद करू शकता, झोपायला जाऊ शकता, सकाळी उठू शकता, संगणक चालू करू शकता, झोपण्यापूर्वी तुम्ही काल बुकमार्क केलेल्या पृष्ठावर जाऊ शकता आणि वरून स्क्रोल करणे सुरू ठेवू शकता. त्याच ठिकाणी तुम्ही थांबला होता. आणि, शिवाय, आपण या ठिकाणाहून केवळ पुढेच नाही तर मागे देखील स्क्रोल करू शकता.

आणि कोणत्याही आवश्यक पृष्ठावर नेव्हिगेशन संदर्भात: तुम्ही येथे कोणत्याही पृष्ठावर जाऊ शकता - वेब पृष्ठाच्या पत्त्यात तुम्हाला आवश्यक असलेल्या निवड पृष्ठाची संख्या बदला. मानव-वाचनीय URL आता मानक झाल्यामुळे, हा एक व्यवहार्य उपाय असावा.

ही स्क्रिप्ट अर्थातच ग्रॅनाइटमध्ये कोरलेली नाही आणि आज सकाळी उठल्यावर मी स्वत: त्यातील अर्धी लिपी लिहिली. तथापि, कार्यप्रदर्शन स्थिर असल्याचे दिसते आणि Chrome आणि FireFox च्या नवीनतम आवृत्त्यांमध्ये चाचणी केली गेली आहे. मी लगेच सांगेन: मी "क्रॉस-ब्राउझर सुसंगतता" चा पाठलाग करत नाही - जर एखाद्याला त्यांच्या "क्रॉस-ब्राउझर" साइटवर ही स्क्रिप्ट वापरायची असेल तर ते नेहमी पूर्ण केले जाऊ शकते.

असे दिसते की सर्वकाही, डेमो स्वतःसाठी बोलतो. पोस्ट टिप्पण्या भडकवते.

आणखी काय केले जाऊ शकते (टिप्पण्यांवर आधारित):

तुम्ही पट्टीवर कुठेही क्लिक करता तेव्हा तुम्ही संबंधित निवड पृष्ठावर जाता.

जेव्हा वेब पृष्ठावर जास्त डेटा असतो तेव्हा वेब पृष्ठाच्या शीर्षस्थानी डेटा पृष्ठे काढा (मंद होऊ नये म्हणून).

सुधारित "अनंत स्क्रोलिंग" ची उदाहरणे.

सर्व नमस्कार. आज मला तुमच्याशी लँडिंग पृष्ठांवर सामग्रीचे आळशी लोडिंग कसे आयोजित करावे याबद्दल बोलायचे आहे.

बऱ्याचदा, याला "अनंत स्क्रोलिंग" देखील म्हणतात. तुम्ही कदाचित असाच प्रभाव पाहिला असेल, जेव्हा सामग्री सुरुवातीला साइटवर नसते, परंतु तुम्ही पृष्ठ स्क्रोल करता तेव्हा ते सहजतेने लोड होते.

बर्याच काळापूर्वी आम्ही "तुमच्या सूचना" विभागात असा प्रभाव कसा लागू करायचा याबद्दल एक लेख लिहिण्याची विनंती केली होती:

म्हणून मी त्याची अंमलबजावणी सुरू करण्याचा निर्णय घेतला. मला कल्पना दिल्याबद्दल धन्यवाद. चला सुरुवात करूया...

बहुतेक प्रकरणांप्रमाणे, आम्ही jQuery लायब्ररी समाविष्ट करून प्रारंभ करतो:

आता आपल्याला थोडे विषयांतर करणे आवश्यक आहे आणि मी तुम्हाला पद्धतीचे सार समजावून सांगेन. हे सर्व साइटचे सर्व घटक (तुमचा पोर्टफोलिओ किंवा पुनरावलोकने) लोड न करण्यासाठी, परंतु आवश्यकतेनुसार लोड करण्यासाठी सुरू केले आहे. उदाहरणार्थ, जेव्हा वापरकर्ता “अधिक दर्शवा” बटणावर क्लिक करतो. अशा प्रकारे पृष्ठ अधिक जलद लोड होईल. आणि आता मुद्दा असा आहे की, ajax तंत्रज्ञानाचा वापर करून आम्ही आवश्यक घटक (div) आणि तृतीय पक्ष फाइल आमच्या लँडिंग पृष्ठावर लोड करू. हे सैद्धांतिक आणि सराव दोन्ही प्रकारे सोपे आहे आणि तुम्हाला ते लवकरच दिसेल.

आता मुख्य ब्लॉक तयार करू, उदाहरणार्थ, आमच्या कामांच्या चित्रांसह. समजा आपण आयकॉन्स काढतो आणि बटणावर क्लिक केल्यावर लोड करतो. मी ही रचना तयार केली:

पोर्टफोलिओ अधिक दाखवा...

जसे आपण पाहू शकता, सर्वकाही सोपे आहे. पण आपण कशाकडे लक्ष दिले पाहिजे? आणि तुम्हाला id="smartPortfolio", id="moreButton" आणि id="loadingDiv" सह div कडे लक्ष देणे आवश्यक आहे, कारण ते स्क्रिप्टमध्ये वापरले जातात, जे आम्हाला इतर पृष्ठांवरून सामग्री लोड करण्यास मदत करते. स्मार्टपोर्टफोलिओ आमच्या पोर्टफोलिओसाठी एक "कंटेनर" आहे. MoreButton - हे आमचे बटण असेल, क्लिक केल्यावर, पोर्टफोलिओचा दुसरा भाग लोड केला जाईल. LoadingDiv - पोर्टफोलिओ पूर्णपणे उघडल्यावर किंवा काही त्रुटी आल्यावर मजकूर प्रदर्शित केला जाईल असे क्षेत्र.

उदाहरणार्थ, काही वाचक अजूनही या स्क्रिप्टची सर्व्हरवर चाचणी करण्याचा प्रयत्न करतील, परंतु ब्राउझरमध्ये फक्त अनुक्रमणिका फाइल उघडतील. तसे असल्यास, त्यांना एक त्रुटी संदेश दिसेल. याशिवाय, अतिशय मंद कनेक्शनसह, फाइल्स डाउनलोड होण्यास वेळ लागू शकतो आणि त्यामुळे वापरकर्त्याला समजेल की प्रक्रिया सुरू आहे, तुम्ही तेथे संदेश लिहू शकता की डेटा डाउनलोड केला जात आहे किंवा ठेवला जात आहे (चित्र, प्रगती सूचक किंवा काहीतरी इतर).

मी स्क्रिप्ट स्वतः लिहिली नाही, परंतु ती एका साइटवर सापडली, लेखक स्त्रोत कोडमध्ये सूचीबद्ध आहे, तुम्हाला स्वारस्य असल्यास, पहा. ते फार मोठे नसल्यामुळे, मी ते सर्व देईन, परंतु जर तुम्ही माझ्यासारखीच आयडी नावे आणि फाईल मार्ग वापरण्याची योजना आखत असाल, तर तुम्हाला ते पाहण्याचीही गरज नाही, परंतु क्लोजिंग बॉडी टॅगच्या आधी ते समाविष्ट करा. (फूटरमध्ये).

ज्यांनी संपादन करण्याची योजना आखली आहे, त्यांच्यासाठी स्क्रिप्ट ही आहे:

Var lazyload = आळशी लोड || (); (फंक्शन($, लेझीलोड) ( "कठोर वापरा"; var पृष्ठ = 2, buttonId = "#moreButton", loadingId = "#loadingDiv", कंटेनर = "#smartPortfolio"; lazyload.load = function() ( var url = "। !response ||. response.trim() == "NONE") ( $(buttonId).fadeOut(); $(loadingId).text("पोर्टफोलिओ पूर्ण लोड"); रिटर्न; ) स्पर्धा (प्रतिसाद); प्रतिसाद) ( $(लोडिंगआयडी). मजकूर("माफ करा, कृपया पृष्ठ रिफ्रेश करा.") ) $(buttonId).शो($(प्रतिसाद); .appendTo($(कंटेनर));

तर, आता आपण ज्या फायलींमधून माहिती लोड करू त्याबद्दल बोलणे योग्य आहे. स्क्रिप्ट असे गृहीत धरते की या 2.html...5.html इत्यादी नावांच्या फाईल्स असतील. ज्यामध्ये आमची माहिती असते. उदाहरणार्थ, मी लोड केलेली पहिली फाइल 2.html आहे आणि त्यात खालील सामग्री आहे:

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

स्क्रिप्टमधील मार्ग खालीलप्रमाणे निर्दिष्ट केला आहे:

Var url = "./pages/" + पृष्ठ + ".html";

तुम्ही वेगळा मार्ग वापरण्याची योजना करत असल्यास, स्क्रिप्टमध्ये ते बदलण्याची खात्री करा. याव्यतिरिक्त, जर तुम्ही इतर आयडी वापरले असतील तर ते स्क्रिप्टमध्ये पुन्हा परिभाषित करावे लागतील. येथे आहे:

ButtonId = "#moreButton", loadingId = "#loadingDiv", कंटेनर = "#smartPortfolio";

आणि, मी आधीच म्हटल्याप्रमाणे, क्लोजिंग बॉडी टॅगच्या आधी आम्ही स्क्रिप्टचा समावेश करतो:

अशा प्रकारे तुम्ही तुमच्या लँडिंग पेजवर "आळशी लोडिंग" लागू करू शकता. ब्लॉगवर तुम्हाला ज्या विषयांवर लेख वाचायला आवडेल असे आणखी विषय आम्हाला पाठवा. शक्यतोवर, मी नियोजित सामग्री प्रकाशित करण्याचा प्रयत्न करेन, परंतु "तुमच्या सूचना" विभागात तुम्ही ज्याबद्दल विचारता ते प्रकाशित करण्याचा प्रयत्न करेन. आणि हे सर्व आजसाठी आहे. बाय!