วิธีใช้ jQuery โหลดเนื้อหาเพิ่มเมื่อเลื่อนสุดหน้าจอ

วิธีใช้ jQuery โหลดเนื้อหาเพิ่มเมื่อเลื่อนสุดหน้าจอ

วิธีใช้ jQuery โหลดเนื้อหาเพิ่มเมื่อเลื่อนสุดหน้าจอ
เคยสังเกตุไหมครับว่าเวลาเราใช้งาน facebook ในหน้า feed หรือหน้าอื่น ๆ ที่มีเนื้อหายาว ๆ เกินหน้าจอ เนื้อหาจะไม่ได้ถูกโหลดขึ้นมาแสดงทีเดียวทั้งหมด แต่จะเป็นการโหลดเนื้อหาที่มีปริมาณที่เหมาะสม แสดงพอดีกับหน้าจอเพื่อไม่ให้หน้าเว็บไซต์ทำงานจากการโหลดข้อมูลหนักจนเกินไป และถ้าเราเลื่อน scrollbar ลงมาระบบจะค่อย ๆ ทยอยโหลดข้อมูลเพิ่มเติมเข้ามา

เรื่อย ๆ ถ้าเราเล่น facebook บนเครื่อง PC จะสังเกตุว่า scrollbar ของ browser จะไม่ไปจดด้านล่างสุดซักที เหตุผลเพราะระบบได้ทำการโหลด more content และบวกเนื้อหาต่อเข้าไปจากเนื้อหาเดิมบนหน้า facebook feed ไปเรื่อย ๆ วันนี้เราจะมาทดลองทำระบบ load more content หรือเรียกอีกอย่างหนึ่งว่า pull load content โดยใช้ความสามารถของ jquery มาดูกันครับว่าจะมีวิธีทำอย่างไรบ้าง

ตัวอย่างการทำงาน Load More Content และ Pull Load Content

สร้างไฟล์ html

สร้างไฟล์ html และกำหนดชื่อคลาสที่เราต้องการโหลดเนื้อหาเพิ่มเข้าไป และเพื่อความเป็นระเบียบให้ใส่คลาส content ไว้ในแท็ก ul และเนื้อหาที่จะเพิ่มเข้าไปให้อยู่ในแท็ก li

<div class="container">
    <ul class="content">
    // ajax จะโหลดเนื้อหาเป็นแท็ก li เพิ่มเข้ามาอยู่ตรงนี้
    </ul>
</div>

สร้างฟังก์ชั่นสำหรับโหลด More Content

ใช้คำสั่ง jQuery .append สำหรับเพิ่มเนื้อหาใหม่ ๆ เข้าไปเมื่อมีการเลื่อน scrollbar มาจนสุดหน้าจอ โดยให้เราสร้าง javascript ฟังก์ชั่นตั้งชื่อว่า loadMore

var content = $(".content");
function loadMore(){
	 var htmlFeed = $('<li>เนื้อหา</li>').hide(); 
	 content.append(htmlFeed);
	 htmlFeed.fadeIn();
}

ใช้ Scroll Event เข้ามาช่วย

ใช้ Scroll Event เพื่อตรวจสอบว่าผู้ใช้งานได้เลื่อน scrollbar ลงมาจนสุดหน้าจอแล้วหรือยัง ถ้าลงมาจนสุดแล้วให้ไปเรียกใช้ฟังก์ชั่น loadMore เพื่อเพิ่มเนื้อหาใหม่ ๆ เข้าไปยังคลาส content

$(window).scroll(function() {
	if($(window).scrollTop() >=  $(document).height()-$(window).height()) {
		loadMore();
	}
});

เป็นอันเสร็จเรียบร้อยสำหรับการทำ load more content หรือ pull load content เราสามารถนำไปประยุกต์ใช้กำการโหลดเนื้อหาแบบ dynamic หรือเนื้อหาที่มาจากฐานข้อมูล โดยอาจจะต้องอาศัยความสามารถของ ajax ดูการโหลดข้อมูลจากฐานข้อมูลโดยใช้ ajax json ได้ที่กระทู้นี้ https://www.codebee.co.th/labs/ใช้งาน-ajax-โหลด-json-มาแสดงผ่าน/

ตัวอย่างการทำงาน Load More Content และ Pull Load Content