<?php if(isset($_GET["load_sample"])){ echo "<hr>"; for($i=1;$i<=20;$i++){ echo "<div>".$i."</div>"; } exit; } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>load data when scroll bottom</title> <style type="text/css"> html,body{ background-color:#CCC; padding:0px; margin:0px; } div.main_test{ position:relative; background-color:#EAE1EA; margin:auto; width:800px; } </style> </head> <body> <div class="main_test"> <?php for($i=1;$i<50;$i++){?> <div><?=$i?></div> <?php } ?> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> $(function(){ // เงื่อนไข event เมื่อมีการเลื่อน scrollbar ในหน้าเพจ $(window).scroll(function(){ // เปรียบเทียบส่วนของการเลื่อนจากตำแหน่งบน บวกกับส่วนของหน้าต่างข้อมูล // ถ้าเท่ากับ ความสูงของเนื้อหาหรือความสูงของเพจนั้นๆ หรือก็คือเมื่อเลื่อนมาตำแหน่งล่างสุด if($(window).scrollTop() + $(window).height() == $(document).height()){ // ในที่นี้ทดสอบการดึงข้อมูลด้วย get อย่างง่าย $.get("load_data_when_scroll.php",{load_sample:1},function(data){ // นำข้อมูลที่ได้ไปแสดงต่อท้าย ภายใน div id เท่ากับ main_test $(".main_test").append(data); }); } }); }); </script> </body> </html>
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง
Load balance : Server 02
Load balance : Server 02
