ไม่มีหมวดหมู่

download font

ดาวน์โหลดฟอนต์ download font

download icon

ดาวน์โหลด ไอค่อน จากสะดุ้ง

download template

ดาวน์โหลด เทมเพลตเว็บต่างๆ

Download Vector

ดาวน์โหลดภาพเว็กเตอร์ จากสะดุ้ง

ของเสริม photoshop

brush style patterns

Home » script ajax

Ajax Load Image แต่งเว็บสวยๆ

Submitted by on วันพฤหัส, 26 พฤษภาคม 2011No Comment


คำค้นหา: , , , , ,

ajax script website Ajax Load Image แต่งเว็บสวยๆ

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งามๆแบบนี้ครับผม

<<< google Plus (กูเกิ้ล พลัส)ซัดที่นี่


Related Posts

คุณอาจจะสนใจ บทความต่อไปนี้(มั้ง)

  สามารถนำบทความไปเผยแพร่ต่อได้ แต่ต้องทำ ลิงค์กับมาที่บทความนั้นๆด้วยนะครับ หากไม่ทำตามจะมีความผิดทางกฏหมายตาม พรบ. เกี่ยวกับลิขสิทธิ์ นะครับ


Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can add images to your comment by clicking here.