jQuery স্ক্রোল আরও ডেটা লোড

148

আমি কেবল ভাবছি যে ডিভ লোডিং দৃশ্যমান হলেই আমি কীভাবে স্ক্রলে আরও ডেটা প্রয়োগ করতে পারি।

আমাদের আরও ডেটা লোড করতে হবে কিনা তা দেখতে সাধারণত আমরা পৃষ্ঠার উচ্চতা এবং স্ক্রোল উচ্চতার সন্ধান করি। তবে নিম্নলিখিত উদাহরণটি তখন খুব জটিল।

নিম্নলিখিত চিত্র নিখুঁত উদাহরণ। ড্রপ ডাউন বাক্সে দুটি .লোডিং ডিভ রয়েছে। যখন ব্যবহারকারী সামগ্রীটি স্ক্রোল করেন, যার মধ্যে যেটি দৃশ্যমান হয় এটি এর জন্য আরও ডেটা লোড করা শুরু করা উচিত।

এখানে চিত্র বর্ণনা লিখুন

সুতরাং আমি কীভাবে খুঁজে বের করতে পারি যে। লোডিং ডিভি ব্যবহারকারীর কাছে এখনও দৃশ্যমান কিনা? সুতরাং আমি কেবলমাত্র সেই ডিভের জন্য ডেটা লোড করা শুরু করতে পারি।

— বাসেত
সূত্র

286

JQuery এ, আপনি স্ক্রোল ফাংশনটি ব্যবহার করে পৃষ্ঠার নীচে আঘাত করেছেন কিনা তা পরীক্ষা করে দেখুন। একবার আপনি এটির পরে, একটি এজাক্স কল করুন (আপনি আজাক প্রতিক্রিয়া অবধি এখানে একটি লোডিং চিত্রটি দেখতে পারেন) এবং পরবর্তী সেট ডেটা পেতে, ডিভের সাথে এটি যুক্ত করুন। আপনি পৃষ্ঠাটি আবার স্ক্রোল করার সাথে সাথে এই ফাংশনটি কার্যকর হবে uted

$(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

রায়ান বেটস এর সম্পর্কে একটি দুর্দান্ত পর্ব রয়েছে: রেলস্কেস্টস / পেপসোড / ১১৪-endless- পৃষ্ঠা । এছাড়াও একটি সংশোধিত সংস্করণ রয়েছে তবে আপনার সাবস্ক্রিপশন লাগতে পারে।

— ভী

4

যদি কেউ জানতে চান যে কোনও ব্যবহারকারী নীচে স্ক্রোল করেছে কিনা সে যদি এখানে প্রদর্শিত হয় তবে এটি এটি ব্যবহার করতে পারে: যদি (window (উইন্ডো) .স্ক্রোলটপ () + $ (উইন্ডো) ) উচ্চতা ()) so কনসোল.লগ ('নীচে স্ক্রোলড!'); }

— রায় শোয়া

5

এই উত্তরটি আমি প্রশ্নে যা বলেছি তা নয়।

— বাসিত

84

আপনি কি jQuery ওয়েপয়েন্ট প্লাগইন সম্পর্কে শুনেছেন ?

নীচে ওয়েপপয়েন্টস প্লাগইন কল করা এবং পৃষ্ঠায় আরও বেশি সামগ্রী চাপানোর সহজ উপায়টি একবার আপনি স্ক্রোলটিতে নীচে পৌঁছানোর পরে:

$(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

জিসফিলের মাধ্যমে বিক্ষোভের কোন সুযোগ?

— cwiggo

4

ভাল পরামর্শ তবে সবচেয়ে খারাপ জেএস প্লাগইন ওয়ে পয়েন্ট .. আমার অনেক সময় নষ্ট হয়েছে .... নীচের উত্তরটি ছিল দ্রুততর দ্রুত

— করণ দাতওয়ানি

2

নীচের কোন উত্তরটি আপনি সেরা বলে মনে করেছেন?

— wuno

অলস লোডার প্রয়োগের জন্য আপনি আমার উত্তরটি উল্লেখ করতে পারেন। stackoverflow.com/a/45846766/2702249

— ওম সাও

9

এখানে একটি উদাহরণ:

নীচে স্ক্রোল করার সময়, এইচটিএমএল উপাদানগুলি সংযোজন করা হয়। এই সংযোজন প্রক্রিয়াটি কেবল দু'বার করা হয় এবং তারপরে পাউডার ব্লু রঙের একটি বোতামটি শেষ পর্যন্ত যুক্ত হয়।

<!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>

স্নিপেট প্রসারিত করুন

— ওম সাও
সূত্র

@ রোহনআশিক: আমি স্রেফ পরীক্ষা করে দেখেছি। ইহা কাজ করছে. শেষ অবধি স্ক্রোল করার চেষ্টা করুন।

— ওম সাও

@ ওম প্রকাশ সাও এখানে কাজ করছে, তবে যখন আমি এই কোডটি সূক্ষ্মভাবে চালাচ্ছি তখন স্ক্রোল বারটি নীচের অংশে শীর্ষে না গিয়ে ঘটনাটি কার্যকর হয় \

— গিকি

8

উইন্ডোটি একটি মান> 100% এ জুম করা হয়ে গেলে এই প্রশ্নের স্বীকৃত উত্তরের ক্রোমের সাথে কিছু সমস্যা রয়েছে। ক্রোম বিকাশকারীদের দ্বারা প্রস্তাবিত কোডটি এখানে আমি যে বাগটি উত্থাপিত করেছি তার অংশ হিসাবে is

$(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
    }
});

— কোপ্রোলাল
সূত্র

ধন্যবাদ ভাই! এটি সত্যিই আমাকে সাহায্য করেছে :)

— রারু

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.taxforcalculator.com এ ওভারহেড হ্রাস করার জন্য আমি এই পদ্ধতির ব্যবহার করেছি । এটি কৌশলটি মরে গেছে, আপনি যদি সাইটটির দিকে তাকান এবং উপাদান ইত্যাদি পরিদর্শন করেন তবে আপনি ক্রোমে পৃষ্ঠা উদাহরণের উপর প্রভাব দেখতে পারেন (উদাহরণ হিসাবে)।

— পিট - iCalculator
সূত্র

1

@ প্রদীপস্নান উত্তরে উন্নতি হচ্ছে। আমরা সম্ভবত নীচে স্ক্রোল করার আগে আপনি কিছুটা লোড করতে চান এমন সম্ভাবনা রয়েছে ।

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 scrolLoad] একটি নতুন ডেটা সংযুক্ত না করা অবধি কলটি ব্লক করতে ব্যবহৃত হয়।

আশাকরি এটা সাহায্য করবে.

— মুনিস আবিদী
সূত্র

0

আপনি প্রশ্নটি বিশেষভাবে ডেটা লোড করার বিষয়ে যখন কোনও ডিভি দেখা যায় , এবং যখন ব্যবহারকারী পৃষ্ঠার শেষে পৌঁছায় না।

এখানে আপনার প্রশ্নের সেরা উত্তর: https://stackoverflow.com/a/33979503/3024226

— ইহসান
সূত্র