jQuery स्क्रॉल पर अधिक डेटा लोड करता है

148

मैं सिर्फ सोच रहा हूं कि मैं केवल स्क्रॉल पर अधिक डेटा कैसे लागू कर सकता हूं यदि div.loading दिखाई दे रहा है।

आमतौर पर हम पृष्ठ की ऊंचाई और स्क्रॉल ऊंचाई की तलाश करते हैं, यह देखने के लिए कि क्या हमें अधिक डेटा लोड करने की आवश्यकता है। लेकिन निम्न उदाहरण तब थोड़ा जटिल है।

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

यहाँ छवि विवरण दर्ज करें

तो मुझे कैसे पता चलेगा कि लोडिंग डिव यूजर को अभी तक दिखाई दे रहा है या नहीं? तो मैं केवल उस div के लिए डेटा लोड करना शुरू कर सकता हूं।

— Basit
स्रोत

286

JQuery में, जांचें कि क्या आपने स्क्रॉल फ़ंक्शन का उपयोग करके पृष्ठ के निचले हिस्से को मारा है। एक बार जब आप इसे हिट करते हैं, तो एक अजाक्स कॉल करें (आप अजाक्स प्रतिक्रिया तक यहां एक लोडिंग छवि दिखा सकते हैं) और डेटा का अगला सेट प्राप्त करें, इसे डिव में जोड़ें। जैसे ही आप पृष्ठ को फिर से स्क्रॉल करते हैं, यह फ़ंक्शन निष्पादित हो जाता है।

$(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
           // ajax call get data from server and append to the div
    }
});

— deepakssn
स्रोत

5

यह समाधान महान और सरल है;) आप इस कोड को अजाक्स कॉल में निम्न पंक्तियों के साथ सुधार सकते हैं: new_element.hide().appendTo('.your_div').fadeIn(); $(window).scrollTop($(window).scrollTop()-1);पहली पंक्ति तत्वों को अच्छे तरीके से जोड़ती है, दूसरा आश्वासन देता है कि आपका कार्य पृष्ठ के नीचे कभी नहीं रुकता है।

— alekwisnia

34

मैं इस तरह से दृष्टिकोण करता हूं, इस तथ्य के लिए लेखांकन कि आपके पेज के नीचे हमेशा मनमाना सामान (नेविगेशन) होता है, और आप वास्तव में नीचे हिट करने से पहले लोड करना चाहते हैं। तो मेरा आंतरिक कार्य है:

var end = $("#BottomThing").offset().top; var viewEnd = $(window).scrollTop() + $(window).height(); var distance = end - viewEnd; if (distance < 300)    // do load

— जेफ पुटज़

2

रयान बेट्स का इस बारे में एक उत्कृष्ट प्रसंग है: railscasts.com/episodes/114-endless-page । एक संशोधित संस्करण भी है, लेकिन आपको सदस्यता की आवश्यकता हो सकती है।

— वी

4

यदि कोई यह जानना पसंद करता है कि क्या किसी उपयोगकर्ता ने नीचे तक स्क्रॉल किया है तो वह इसका उपयोग कर सकता है यदि यहां प्रदर्शित होने की स्थिति में: यदि ($ (विंडो) .scrollTop () + $ (विंडो) .height () == $ (दस्तावेज़) ) .height ()) {कंसोल.लॉग ('नीचे स्क्रॉल किया गया!'); }

— रॉय शोए

5

यह उत्तर वह नहीं है जो मैंने प्रश्न में पूछा है।

— बासित

84

क्या आपने jQuery Waypoint प्लगइन के बारे में सुना है ।

नीचे स्क्रॉल करने पर एक तरह से प्‍वाइंट प्‍वाइंट को कॉल करने का सरल तरीका है और पेज लोड होने के बाद पेज अधिक लोड होता है:

$(document).ready(function() {
    var $loading = $("<div class='loading'><p>Loading more items&hellip;</p></div>"),
    $footer = $('footer'),
    opts = {
        offset: '100%'
    };

    $footer.waypoint(function(event, direction) {
        $footer.waypoint('remove');
        $('body').append($loading);
        $.get($('.more a').attr('href'), function(data) {
            var $data = $(data);
            $('#container').append($data.find('.article'));
            $loading.detach();
            $('.more').replaceWith($data.find('.more'));
            $footer.waypoint(opts);
        });
    }, opts);
});

— defau1t
स्रोत

8

jsfiddle के माध्यम से प्रदर्शन का कोई भी मौका?

— cwiggo

4

अच्छा सुझाव है, लेकिन सबसे खराब जेएस प्लगइन तरीका है .. मेरा बहुत समय बर्बाद किया .... नीचे जवाब बहुत तेज n जल्दी था

— करण दतवानी

2

नीचे कौन सा उत्तर आपको सबसे अच्छा लगा?

— 21

आप आलसी लोडर कार्यान्वयन के लिए मेरे जवाब का उल्लेख कर सकते हैं। stackoverflow.com/a/45846766/2702249

— ओम साओ

9

यहाँ एक उदाहरण है:

नीचे की ओर स्क्रॉल करने पर, html एलिमेंट्स को अपडेड किया जाता है। यह एपेंडिंग तंत्र केवल दो बार किया जाता है, और फिर पाउडरब्ले रंग के साथ एक बटन को अंतिम रूप से जोड़ा जाता है।

<!DOCTYPE html>
<html>
<head>
    <title>Demo: Lazy Loader</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style>
        #myScroll {
            border: 1px solid #999;
        }

        p {
            border: 1px solid #ccc;
            padding: 50px;
            text-align: center;
        }

        .loading {
            color: red;
        }
        .dynamic {
            background-color:#ccc;
            color:#000;
        }
    </style>
    <script>
		var counter=0;
        $(window).scroll(function () {
            if ($(window).scrollTop() == $(document).height() - $(window).height() && counter < 2) {
                appendData();
            }
        });
        function appendData() {
            var html = '';
            for (i = 0; i < 10; i++) {
                html += '<p class="dynamic">Dynamic Data :  This is test data.<br />Next line.</p>';
            }
            $('#myScroll').append(html);
			counter++;
			
			if(counter==2)
			$('#myScroll').append('<button id="uniqueButton" style="margin-left: 50%; background-color: powderblue;">Click</button><br /><br />');
        }
    </script>
</head>
<body>
    <div id="myScroll">
        <p>
            Contents will load here!!!.<br />
        </p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
    </div>
</body>
</html>

स्निपेट का विस्तार करें

— ओम साओ
स्रोत

@ रोहनअशिक: मैंने अभी-अभी जाँच की है। यह काम कर रहा है। नीचे तक स्क्रॉल करने का प्रयास करें।

— ओम साओ

@ ओ एम प्रकाश साओ इसका काम यहाँ ठीक है, लेकिन जब मैं इस कोड को उदात्त में चला रहा हूं, तब घटना तब काम करती है जब स्क्रॉल बार ऊपर से नीचे नहीं, \

— geeky

8

इस प्रश्न के स्वीकृत उत्तर में क्रोम के साथ कुछ समस्या है जब विंडो को मान में ज़ूम किया जाता है> 100%। यहाँ क्रोम डेवलपर्स द्वारा सुझाए गए कोड को उसी बग के हिस्से के रूप में रखा गया है जिसे मैंने उठाया था।

$(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() >= $(document).height()){
     //Your code here
  }
});

सन्दर्भ के लिए:

संबंधित एसओ सवाल

क्रोम बग

— प्रशान्त के.सी.
स्रोत

7

यदि आपके सभी दस्तावेज़ स्क्रॉल नहीं करते हैं, तो कहें, जब आपके पास divदस्तावेज़ के भीतर एक स्क्रॉल है , तो उपरोक्त समाधान अनुकूलन के बिना काम नहीं करेंगे। यहां यह जांचने का तरीका है कि क्या डिव का स्क्रॉलबार नीचे मारा गया है:

$('#someScrollingDiv').on('scroll', function() {
    let div = $(this).get(0);
    if(div.scrollTop + div.clientHeight >= div.scrollHeight) {
        // do the lazy loading here
    }
});

— इस Coprolal
स्रोत

धन्यवाद भाई! इसने वास्तव में मेरी मदद की :)

— 13

1

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

समारोह:

function ifViewLoadContent(elem, LoadContent)
    {
            var top_of_element = $(elem).offset().top;
            var bottom_of_element = $(elem).offset().top + $(elem).outerHeight();
            var bottom_of_screen = $(window).scrollTop() + window.innerHeight;
            var top_of_screen = $(window).scrollTop();

            if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
            if(!$(elem).hasClass("ImLoaded"))   {
                $(elem).load(LoadContent).addClass("ImLoaded");
            }
            }
            else {
               return false;
            }
        }

फिर आप स्क्रॉल पर विंडो का उपयोग करके फ़ंक्शन को कॉल कर सकते हैं (उदाहरण के लिए, आप इसे एक क्लिक आदि पर भी बाँध सकते हैं जैसा कि मैं भी करता हूं, इसलिए फ़ंक्शन):

काम में लाना:

$(window).scroll(function (event) {
        ifViewLoadContent("#AjaxDivOne", "someFile/somecontent.html"); 

        ifViewLoadContent("#AjaxDivTwo", "someFile/somemorecontent.html"); 
    });

यह दृष्टिकोण स्क्रॉलिंग विभाग आदि के लिए भी काम करना चाहिए। मुझे आशा है कि यह मदद करता है, ऊपर दिए गए प्रश्न में आप इस सामग्री का उपयोग अनुभागों में अपनी सामग्री को लोड करने के लिए कर सकते हैं, हो सकता है कि अपग्रेड करें और इस तरह से वह सभी डेटा डेटा बल्क फीड के बजाय फीड कर दें।

मैंने https://www.taxformcalculator.com पर ओवरहेड को कम करने के लिए इस दृष्टिकोण का उपयोग किया । यह चाल मर गया, यदि आप साइट को देखते हैं और तत्व आदि का निरीक्षण करते हैं तो आप क्रोम में पेज लोड (उदाहरण के लिए) पर प्रभाव देख सकते हैं।

— पीट - iCalculator
स्रोत

1

@Deepakssn उत्तर पर सुधार। इस बात की संभावना है कि आप चाहते हैं कि डेटा वास्तव में नीचे स्क्रॉल करने से पहले थोड़ा लोड हो जाए ।

var scrollLoad = true;
$(window).scroll(function(){
 if (scrollLoad && ($(document).height() - $(window).height())-$(window).scrollTop()<=800){
    // fetch data when we are 800px above the document end
    scrollLoad = false;
   }
  });

[var स्क्रॉलऑलड] का उपयोग कॉल को ब्लॉक करने के लिए किया जाता है जब तक कि एक नया डेटा जोड़ा नहीं जाता है।

उम्मीद है की यह मदद करेगा।

— मूनिस अबीदी
स्रोत

0

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

यहाँ आपके प्रश्न का सबसे अच्छा उत्तर है: https://stackoverflow.com/a/33979503/3024226

— इहसान
स्रोत