อ่านหัวข้อแล้วอาจจะงงนิดหน่อย (หรืออาจจะไม่หน่อยก็ได้ ฮ่าๆ) เทคนิคนี้อาจจะไม่จำเป็นต้องใช้กับ iframe ก็ได้ครับ เอาไปใช้กับรูปก็ได้ครับ ซึ่งถ้าใช้เทคนิคนี้จะทำให้หน้าเว็บของเราดูโหลดเร็วขึ้น แต่จะมากหรือน้อยก็ขึ้นอยู่กับ เนื้อหาที่เราโหลดใน iframe หรือขนาดของรูปด้วยนะครับ
[imooh_google_ads]
เทคนิคนี้จะใช้กับส่วนที่เราไม่จำเป็นจะต้องให้เห็นโดยทันที เช่น like box ของเฟสบุ๊กที่ไม่จำเป็นต้องโหลดขึ้นมาทันที หรือ ปุ่มแชร์ของเจ้าอื่นๆ ก็ตามครับ เพราะคนที่เค้าเข้ามาอ่านเว็บเราก็คงจะต้องดูเนื้อหาก่อน ถ้าถูกใจถึงจะกดไลค์กดแชร์ ดังนั้นปุ่มไลค์หรือ iframe อื่นๆ ที่ไม่จำเป็นก็ให้โหลดขึ้นมาทีหลังดีแล้ว
แล้ววิธีการก็ไม่ยากเลยครับ ใช้ฟังก์ชัน load() ของ jQuery เข้ามาช่วย ซื่งแน่นอนว่าทุกคนน่าจะมีการใช้งาน jQuery อยู่แล้ว เพราะของเค้าดีจริง ^^ เริ่มกันเลยดีกว่า
ก่อนอื่นก็ปรับ HTML นิดหน่อยครับแทนที่ iframe ด้วยแท็ก span ประมาณนี้ครับ ใช้ display:none เพื่อซ่อนไว้ก่อน
<span id="myiframe" style="display:none;"></span>
จากนั้นก็นำแท็ก iframe ไปไว้ในฟังก์ชั้น load ครับ เอาไว้ล่างสุดเลยก็ได้ครับ
...
<script type="text/javascript">
$(function(){
$(window).load(function(){
$("#myiframe").replaceWith("<iframe src="..." style="..."></iframe>");
});
});
</script>
</body>
</html>
เพียงเท่านี้ เนื้อหาที่ต้องการโหลดใน iframe ก็จะถูกโหลดขึ้นมาก็ต่อเมื่อหน้าเว็บของเราถูกโหลดเสร็จก่อนครับ ^^