วิธีใช้ jQuery โหลดเนื้อหาเพิ่มเมื่อเลื่อนสุดหน้าจอ
วิธีใช้ jQuery โหลดเนื้อหาเพิ่มเมื่อเลื่อนสุดหน้าจอ
เคยสังเกตุไหมครับว่าเวลาเราใช้งาน facebook ในหน้า feed หรือหน้าอื่น ๆ ที่มีเนื้อหายาว ๆ เกินหน้าจอ เนื้อหาจะไม่ได้ถูกโหลดขึ้นมาแสดงทีเดียวทั้งหมด แต่จะเป็นการโหลดเนื้อหาที่มีปริมาณที่เหมาะสม แสดงพอดีกับหน้าจอเพื่อไม่ให้หน้าเว็บไซต์ทำงานจากการโหลดข้อมูลหนักจนเกินไป และถ้าเราเลื่อน scrollbar ลงมาระบบจะค่อย ๆ ทยอยโหลดข้อมูลเพิ่มเติมเข้ามา
เรื่อย ๆ ถ้าเราเล่น facebook บนเครื่อง PC จะสังเกตุว่า scrollbar ของ browser จะไม่ไปจดด้านล่างสุดซักที เหตุผลเพราะระบบได้ทำการโหลด more content และบวกเนื้อหาต่อเข้าไปจากเนื้อหาเดิมบนหน้า facebook feed ไปเรื่อย ๆ วันนี้เราจะมาทดลองทำระบบ load more content หรือเรียกอีกอย่างหนึ่งว่า pull load content โดยใช้ความสามารถของ jquery มาดูกันครับว่าจะมีวิธีทำอย่างไรบ้าง
สร้างไฟล์ 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-มาแสดงผ่าน/