ajaxscript load image เรียกรูปมาทีละรูป
สคลิป เรียกรูปภาพมาแสดงแบบ ลื่นๆค่อยๆแสดง โดยปกติแล้วถ้าหน้าเว็บที่มีรูปเยอะๆเวลาโหลดภาพก็จะช้าหน่อย และก็จะโหลดมาช้า พอโหลดมาแล้วก็ไม่สวยจะโหลดแล้วแสดงตามที่โหลดได้ ซึ่งมันธรรมดาไป วันนี้ สะดุ้ง.คอม มีวิธี ทำให้การโหลดภาพธรรมดาๆดูน่าสนใจยิ่งขึ้นไม่น่าเบื่อ โดยเราจะใช้ Ajax เข้ามาช่วย ซึ่งข้อดีของ Ajax แน่นอนคือสวยงามครับ ส่วนการเขียน ajax มาใช้กับหน้าเว็บเราก็ไม่ยากนัก ลองทำดูครับแล้วจะทำให้เว็บเราสวยงามได้มากเลยทีเดียวครับตัวอย่างของเอฟเฟคนี้ดูได้ที่นี่นะครับ ตัวอย่าง AJAX SCRIPT
มาเริ่มเขียนกันเลยดีกว่าครับ
1. ตรงแท็ก HEAD เราจะแทรกโค๊ดด้านล่างนี้ลงไปนะครับ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var i = 0;
$('#imagesdiv img').each(function()
{
var me = this;
$(this).hide()
var j = i;
setTimeout(function()
{
$(me).fadeIn(1000);
}, i)
i += 100
});
});
</script>
|
2.เมื่อเราแทรกโค๊ด javascript ไปแล้วคราวนี้ก็เป็นส่วนของการแสดงผลแล้ว ปกติเราจะแสดงผลในส่วนของ แท็ก body นะครับ ถ้าจะให้รูปมีเอฟเฟคที่ไหนก็นำโค๊ดนี้ไปแทรกได้เลยนะครับ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<div id="imagesdiv">
เรียกรูปมาแสดง
</div>
ตัวอย่างนะครับ
<div id="imagesdiv">
<img src="http://www.sadung.com/wp-content/themes/arthemia-premium/images/logo/logo_sadung.png" />
<img src="http://www.sadung.com/wp-content/themes/arthemia-premium/images/logo/logo_sadung.png" />
<img src="http://www.sadung.com/wp-content/themes/arthemia-premium/images/logo/logo_sadung.png" />
<img src="http://www.sadung.com/wp-content/themes/arthemia-premium/images/logo/logo_sadung.png" />
<img src="http://www.sadung.com/wp-content/themes/arthemia-premium/images/logo/logo_sadung.png" />
<img src="http://www.sadung.com/wp-content/themes/arthemia-premium/images/logo/logo_sadung.png" />
<img src="http://www.sadung.com/wp-content/themes/arthemia-premium/images/logo/logo_sadung.png" />
</div>
|
โอเคครับแค่นี้เราก็ได้เอฟเฟคสวยๆไปแต่งเว็บไซต์กันแล้วนะครับ ด้วย Ajaxงามๆแบบนี้ครับผม
