jQuery โหลดข้อมูลเพิ่มเติมเมื่อเลื่อน

148

ฉันแค่สงสัยว่าฉันจะใช้ข้อมูลเพิ่มเติมในการเลื่อนได้ต่อเมื่อ div.loading สามารถมองเห็นได้

โดยปกติแล้วเราจะค้นหาความสูงของหน้าและความสูงของหน้าเลื่อนเพื่อดูว่าเราจำเป็นต้องโหลดข้อมูลเพิ่มเติมหรือไม่ แต่ตัวอย่างต่อไปนี้ซับซ้อนเล็กน้อยแล้ว

ภาพต่อไปนี้เป็นตัวอย่างที่สมบูรณ์แบบ มี div. load สองอันบนกล่องดรอปดาวน์ เมื่อผู้ใช้เลื่อนเนื้อหาสิ่งที่มองเห็นได้ก็ควรเริ่มโหลดข้อมูลเพิ่มเติม

ป้อนคำอธิบายรูปภาพที่นี่

ดังนั้นฉันจะทราบได้อย่างไรว่าผู้ใช้ div. loading มองเห็นได้หรือไม่ ดังนั้นฉันสามารถเริ่มต้นการโหลดข้อมูลสำหรับ div นั้นเท่านั้น

— ซิต
แหล่งที่มา

286

ใน jQuery ตรวจสอบว่าคุณได้กดที่ด้านล่างของหน้าโดยใช้ฟังก์ชั่นเลื่อน เมื่อคุณกดปุ่มแล้วให้โทร ajax (คุณสามารถแสดงภาพโหลดที่นี่จนถึงการตอบสนอง ajax) และรับชุดข้อมูลถัดไปผนวกเข้ากับ div ฟังก์ชั่นนี้จะทำงานเมื่อคุณเลื่อนหน้าลงอีกครั้ง

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

— deepakssn
แหล่งที่มา

5

วิธีนี้เป็นวิธีที่ยอดเยี่ยมและง่ายที่สุด;) คุณสามารถปรับปรุงโค้ดนี้ด้วยบรรทัดต่อไปนี้ในการโทร ajax: 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

— Jeff Putz

2

ไรอันเบตส์มีฉากที่ยอดเยี่ยมเกี่ยวกับเรื่องนี้: railscasts.com/episodes/114-endless-page นอกจากนี้ยังมีรุ่นที่แก้ไข แต่คุณอาจต้องสมัครสมาชิก

— Vee

4

หากมีคนต้องการทราบว่าผู้ใช้เลื่อนไปที่ด้านล่างเขาสามารถใช้สิ่งนี้ถ้าเงื่อนไขภายในถ้าที่แสดงที่นี่: if ($ (หน้าต่าง) .scrollTop () + $ (หน้าต่าง) .height () == $ (เอกสาร ) .height ()) {console.log ('เลื่อนไปที่ด้านล่าง!'); }

— Roy Shoa

5

คำตอบนี้ไม่ใช่สิ่งที่ฉันถามในคำถาม

— Basit

84

คุณเคยได้ยินเกี่ยวกับปลั๊กอิน jQuery Waypointหรือไม่

ด้านล่างเป็นวิธีที่ง่ายในการเรียกใช้ปลั๊กอิน waypoints และให้หน้าโหลดเนื้อหามากขึ้นเมื่อคุณเลื่อนไปถึงด้านล่าง:

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

คำแนะนำที่ดี แต่ waypoint js plugin ที่แย่ที่สุด .. ฉันเสียเวลามาก .... คำตอบด้านล่างเร็วขึ้นมากและเร็วขึ้น

— Karan Datwani

2

คำตอบใดที่คุณคิดว่าดีที่สุด?

— wuno

คุณสามารถอ้างถึงคำตอบของฉันสำหรับการใช้ Lazy Loader stackoverflow.com/a/45846766/2702249

— Om Sao

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>

ขยายตัวอย่างข้อมูล

— อ้อมเซา
แหล่งที่มา

@RohanAshik: ฉันเพิ่งตรวจสอบ มันใช้งานได้ดี ลองเลื่อนลงจนสุด

— โอมเซา

@Om Prakash Sao มันทำงานได้ดีที่นี่ แต่เมื่อฉันเรียกใช้รหัสนี้ในประเสริฐแล้วเหตุการณ์จะทำงานเมื่อแถบเลื่อนไปด้านบนไม่ใช่ด้านล่าง \

— geeky

8

คำตอบที่ได้รับการยอมรับของคำถามนี้มีปัญหากับโครเมี่ยมเมื่อหน้าต่างถูกซูมเข้าสู่ค่า> 100% นี่คือรหัสที่นักพัฒนาซอฟต์แวร์โครเมี่ยมแนะนำซึ่งเป็นส่วนหนึ่งของบั๊กที่ฉันเคยได้รับในคราวเดียวกัน

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

สำหรับการอ้างอิง:

คำถาม SO ที่เกี่ยวข้อง

Chrome Bug

— Prasanth KC
แหล่งที่มา

7

หากเอกสารทั้งหมดของคุณเลื่อนไม่ได้ให้พูดว่าเมื่อคุณมีการเลื่อนdivภายในเอกสารการแก้ปัญหาด้านบนจะไม่ทำงานหากไม่มีการดัดแปลง ต่อไปนี้เป็นวิธีตรวจสอบว่าแถบเลื่อนของ div มีด้านล่าง:

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

— Coprolal
แหล่งที่มา

ขอบคุณมาก! นี่ช่วยฉันได้จริงๆ :)

— Raru

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"); 
    });

วิธีการนี้ควรใช้กับการเลื่อน divs และอื่น ๆ ฉันหวังว่ามันจะช่วยได้ในคำถามข้างต้นคุณสามารถใช้วิธีนี้ในการโหลดเนื้อหาของคุณในส่วนอาจผนวกและเลี้ยงลูกให้กินข้อมูลภาพทั้งหมดแทนที่จะเป็นฟีดจำนวนมาก

ผมใช้วิธีนี้เพื่อลดค่าใช้จ่ายในhttps://www.taxformcalculator.com มันเสียเทคนิคหากคุณดูที่เว็บไซต์และตรวจสอบองค์ประกอบ ฯลฯ คุณสามารถเห็นผลกระทบต่อการโหลดหน้าเว็บใน Chrome (เป็นตัวอย่าง)

— Pete - 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 scrollLoad] ใช้เพื่อบล็อกการโทรจนกว่าจะมีการเพิ่มข้อมูลใหม่หนึ่งรายการ

หวังว่านี่จะช่วยได้

— Moonis Abidi
แหล่งที่มา

0

คำถามของคุณเกี่ยวกับการโหลดข้อมูลเมื่อ div เข้าสู่การดูไม่ใช่เมื่อผู้ใช้มาถึงจุดสิ้นสุดของหน้า

นี่คือคำตอบที่ดีที่สุดสำหรับคำถามของคุณ: https://stackoverflow.com/a/33979503/3024226

— Ihsan
แหล่งที่มา