โหลดเมื่อจำเป็นต้องโหลด
รู้มั้ยครับ คุณสมบัติเด่นอีกอย่างนึงของ JavaScript คืออะไร “แดกแรม client” ใช่แล้วครับ มันชอบดูดแรมผู้ใช้งานไปเรื่อย โดนไม่คืนเสียด้วย แถมการ include JavaScript ที่เขียนเยอะๆ ไฟล์ใหญ่ๆ เข้าไปยังทำให้ page load ช้าอีก นอกเหนือจาก เทคนิค การ บีบอัดไฟล์ js แล้ว วันนี้ผมจะมาแนะนำ อีกเทคนิคนึงกัน นั่นคือ…
การใช้คำสั่ง $.getScript ซึ่งคำสั่งนี้ ใช้ทำอะไรบ้างมาดูกัน
1. สามารถ ใช้เรียก javascript ให้ทำงาน หลังจากทำ Event ต่างๆ เป็นการแก้ปัญหา event listener ไปในตัว
2. สามารถ ลดโหลด ในหน้าเวบได้ โดยจะเรียกใช้เมื่อจำเป็นเท่านั้น
ในวันนี้ผมจะมาแนะนำ ประโยชน์ในข้อที่ 2 กัน เพราะข้อที่ 1 พูดมาหลายทีแล้ว เรื่องแก้ปัญหา event ไม่รับฟังหลังจากมีการ append DOM ขึ้นมาใหม่เนี่ย
test.html
-
-
<html>
-
<head>
-
<title>jQueryTips.com</title>
-
<script type="text/javascript" src="jquery.js"></script>
-
<script language="JavaScript">
-
<!–
-
$(function() {
-
-
$(‘.loadJs’).click(function() {
-
$.getScript(’script.js’ , function() {
-
// do something after script loaded
-
});
-
return false;
-
});
-
-
});
-
//–>
-
</script>
-
</head>
-
<body>
-
-
<a href="http://www.google.com" class="loadJs">Click to load JS</a>
-
<div class="redit">Some Text</div>
-
-
</body>
-
</html>
-
script.js
-
-
$(function() {
-
$(‘.redit’).css(‘background’, ‘red’);
-
});
-
จากตัวอย่าง ไฟล์ script.js จะทำหน้าที่ เปลี่ยนสีของ bg โดยจะหา node ที่มี class = redit
ซึ่งการทำงานจะเริ่มตั้งแต่มีการกด .loadJs หลังจากที่ทำการกด จะไปเรียก script include ที่ชื่อว่า script.js โดยใช้คำสั่ง $.getScript
และ script.js จะทำงานต่อทันที เพื่อใช้งาน ณ ขณะนั้นเลย ไม่จำเป็นต้องโหลดมาไว้ทั้งหมดก่อน
เอาล่ะ วันนี้อัพเดท สั้นๆ พอหลังจากหายไปนาน ไว้จะเอา Tips เด็ดๆ มาฝาก jQueryTips Fans กันอีกนะครับ ^^
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
ขอบคุณครับ
ไม่เสียดายที่ cheer jQuery มาตั้งแต่ตอนยังไม่ดัง ตอนนี้เมืองนอกเป็นชื่นชอบกันมากครับ 
หวัดดีครับ ผมก็ใช้ jquery เป็นประจำ แต่มีปัญหานึง ว่าถ้าใช้อันนี้กับ
google map มันไม่ทำงานอ่ะ พี่มีวิธีแก้ไหม เพราะผมต้องเขียนเป็น
tag ถึงจะทำงาน แต่ก็ไม่อยากฝั่งไว้ที่ header ไว้ทุกหน้า