jQuery-ajax-โหลด-json-data

วิธีใช้ 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


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

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


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

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



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

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


กระทู้ใกล้เคียง

การทำ CSS Transition ทำเว็บไซต์ให้มีลูกเล่น... การทำ CSS Transition ทำเว็บไซต์ให้มีลูกเล่น การทำ CSS Transition ทำเว็บไซต์ให้มีลูกเล่น การทำ CSS Transition และการทำ CSS Animation เป็นการเพิ่มลู...
สอน codeigniter ทำ url ให้สั้นและสวยด้วย _remap... สอน codeigniter ทำ url ให้สั้นและสวยด้วย _remap สอน codeigniter ทำ url ให้สั้นและสวยด้วย _remap จุดประสงค์หลักของการทำ Remapping Method Calls หรือ...
ใช้งาน Ajax โหลด JSON มาแสดงผ่านภาษาพีเอชพี... ใช้งาน Ajax โหลด JSON มาแสดงผ่านภาษาพีเอชพี Ajax เป็นหนึ่งในความสามารถของ jQuery ซึ่งเป็น Javascript Framework ที่ได้รับความนิยมอย่างแพร่หลาย ในการ...
PHP Codeigniter เน้นใช้งาน : ตอน 1 ดาวน์โหลดและติด... PHP Codeigniter : ตอน 1 ดาวน์โหลดและติดตั้ง codeinginter PHP Codeigniter เป็น MVC framework ที่ได้รับความนิยมและใช้ในงานพัฒนาเว็บไซต์กันอย่างแพร่หล...