ใช้ jQuery ในการโหลด iframe หลังจากที่หน้าเว็บโหลดเสร็จแล้ว

อ่านหัวข้อแล้วอาจจะงงนิดหน่อย (หรืออาจจะไม่หน่อยก็ได้ ฮ่าๆ) เทคนิคนี้อาจจะไม่จำเป็นต้องใช้กับ iframe ก็ได้ครับ เอาไปใช้กับรูปก็ได้ครับ ซึ่งถ้าใช้เทคนิคนี้จะทำให้หน้าเว็บของเราดูโหลดเร็วขึ้น แต่จะมากหรือน้อยก็ขึ้นอยู่กับ เนื้อหาที่เราโหลดใน iframe หรือขนาดของรูปด้วยนะครับ



เทคนิคนี้จะใช้กับส่วนที่เราไม่จำเป็นจะต้องให้เห็นโดยทันที เช่น 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 ก็จะถูกโหลดขึ้นมาก็ต่อเมื่อหน้าเว็บของเราถูกโหลดเสร็จก่อนครับ ^^