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

<h3>วิธีใช้ jQuery โหลดเนื้อหาเพิ่มเมื่อเลื่อนสุดหน้าจอ<&sol;h3>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>วิธีใช้ jQuery โหลดเนื้อหาเพิ่มเมื่อเลื่อนสุดหน้าจอ<&sol;strong><br &sol;>&NewLine;เคยสังเกตุไหมครับว่าเวลาเราใช้งาน facebook ในหน้า feed หรือหน้าอื่น ๆ ที่มีเนื้อหายาว ๆ เกินหน้าจอ เนื้อหาจะไม่ได้ถูกโหลดขึ้นมาแสดงทีเดียวทั้งหมด แต่จะเป็นการโหลดเนื้อหาที่มีปริมาณที่เหมาะสม แสดงพอดีกับหน้าจอเพื่อไม่ให้หน้าเว็บไซต์ทำงานจากการโหลดข้อมูลหนักจนเกินไป และถ้าเราเลื่อน scrollbar ลงมาระบบจะค่อย ๆ ทยอยโหลดข้อมูลเพิ่มเติมเข้ามา<&excl;--more--><&sol;p>&NewLine;<p>เรื่อย ๆ ถ้าเราเล่น facebook บนเครื่อง PC จะสังเกตุว่า scrollbar ของ browser จะไม่ไปจดด้านล่างสุดซักที เหตุผลเพราะระบบได้ทำการโหลด more content และบวกเนื้อหาต่อเข้าไปจากเนื้อหาเดิมบนหน้า facebook feed ไปเรื่อย ๆ วันนี้เราจะมาทดลองทำระบบ load more content หรือเรียกอีกอย่างหนึ่งว่า pull load content โดยใช้ความสามารถของ jquery มาดูกันครับว่าจะมีวิธีทำอย่างไรบ้าง<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<blockquote><p><a href&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;examples&sol;ajax&lowbar;load&lowbar;more&lowbar;content&sol;" target&equals;"&lowbar;blank">ตัวอย่างการทำงาน Load More Content และ Pull Load Content<&sol;a><&sol;p><&sol;blockquote>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>สร้างไฟล์ html<&sol;h4>&NewLine;<p>สร้างไฟล์ html และกำหนดชื่อคลาสที่เราต้องการโหลดเนื้อหาเพิ่มเข้าไป และเพื่อความเป็นระเบียบให้ใส่คลาส content ไว้ในแท็ก ul และเนื้อหาที่จะเพิ่มเข้าไปให้อยู่ในแท็ก li<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;div class&equals;"container"&gt&semi; &NewLine; &lt&semi;ul class&equals;"content"&gt&semi; &NewLine; &sol;&sol; ajax จะโหลดเนื้อหาเป็นแท็ก li เพิ่มเข้ามาอยู่ตรงนี้ &NewLine; &lt&semi;&sol;ul&gt&semi; &NewLine;&lt&semi;&sol;div&gt&semi;<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>สร้างฟังก์ชั่นสำหรับโหลด More Content<&sol;h4>&NewLine;<p>ใช้คำสั่ง jQuery &period;append สำหรับเพิ่มเนื้อหาใหม่ ๆ เข้าไปเมื่อมีการเลื่อน scrollbar มาจนสุดหน้าจอ โดยให้เราสร้าง javascript ฟังก์ชั่นตั้งชื่อว่า loadMore <&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " > &NewLine;var content &equals; &dollar;&lpar;"&period;content"&rpar;&semi; &NewLine;function loadMore&lpar;&rpar;&lbrace; &NewLine;&Tab; var htmlFeed &equals; &dollar;&lpar;'&lt&semi;li&gt&semi;เนื้อหา&lt&semi;&sol;li&gt&semi;'&rpar;&period;hide&lpar;&rpar;&semi; &NewLine;&Tab; content&period;append&lpar;htmlFeed&rpar;&semi; &NewLine;&Tab; htmlFeed&period;fadeIn&lpar;&rpar;&semi; &NewLine;&rcub;<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>ใช้ Scroll Event เข้ามาช่วย<&sol;h4>&NewLine;<p>ใช้ <strong>Scroll Event<&sol;strong> เพื่อตรวจสอบว่าผู้ใช้งานได้เลื่อน scrollbar ลงมาจนสุดหน้าจอแล้วหรือยัง ถ้าลงมาจนสุดแล้วให้ไปเรียกใช้ฟังก์ชั่น loadMore เพื่อเพิ่มเนื้อหาใหม่ ๆ เข้าไปยังคลาส content<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&dollar;&lpar;window&rpar;&period;scroll&lpar;function&lpar;&rpar; &lbrace; &NewLine;&Tab;if&lpar;&dollar;&lpar;window&rpar;&period;scrollTop&lpar;&rpar; &gt&semi;&equals; &dollar;&lpar;document&rpar;&period;height&lpar;&rpar;-&dollar;&lpar;window&rpar;&period;height&lpar;&rpar;&rpar; &lbrace; &NewLine;&Tab;&Tab;loadMore&lpar;&rpar;&semi; &NewLine;&Tab;&rcub; &NewLine;&rcub;&rpar;&semi;<&sol;pre>&NewLine;<p><&sol;br><br &sol;>&NewLine;เป็นอันเสร็จเรียบร้อยสำหรับการทำ <strong>load more content<&sol;strong> หรือ <strong>pull load content<&sol;strong> เราสามารถนำไปประยุกต์ใช้กำการโหลดเนื้อหาแบบ dynamic หรือเนื้อหาที่มาจากฐานข้อมูล โดยอาจจะต้องอาศัยความสามารถของ ajax ดูการโหลดข้อมูลจากฐานข้อมูลโดยใช้ ajax json ได้ที่กระทู้นี้ <a href&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;ใช้งาน-ajax-โหลด-json-มาแสดงผ่าน&sol;" target&equals;"&lowbar;blank">https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;ใช้งาน-ajax-โหลด-json-มาแสดงผ่าน&sol;<&sol;a><br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<blockquote><p><a href&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;examples&sol;ajax&lowbar;load&lowbar;more&lowbar;content&sol;" target&equals;"&lowbar;blank">ตัวอย่างการทำงาน Load More Content และ Pull Load Content<&sol;a><&sol;p><&sol;blockquote>&NewLine;<p><&sol;br><&sol;p>&NewLine;