สวัสดีครับ ทุกๆท่าน วันนี้เอกคอม ก็มีเนื้อหาสาระมาฝากกันอีกแล้วครับ เป็นเรื่องราวเกี่ยวกับการ ทำเว็บไซต์ ซึ่งเจ้าเคล็ดลับที่เจ้ามาฝากกันวันนี้คือ การทำ Page Load แบบง่ายๆนั่นเอง เอาละเพื่อไม่ให้เป็นการเสียเวลา เราไปดูกันเลยนะครับว่าจะมีขั้นตอนการทำอย่างไร
ทำ Page Load ด้วย PHP + jQuery
ส่วนแรกนั้นเป็น Code ส่วนของ Style
<style>#overlay { position: absolute; top: 0px; left: 0px; background: #ccc; width: 100%; height: 100%; opacity: .75; filter: alpha(opacity=75); -moz-opacity: .75; z-index: 999; background: #fff url(https://i.imgur.com/KUJoe.gif) 50% 50% no-repeat; }</style>
อธิบายเพิ่มเติม ในหน้าที่เราต้องการสร้าง Page load นั้นให้เราทำการกำหนด Code ในส่วนของ Style เอาไว้ในส่วนของ
<head> ใส่ Code Style เอาไว้ระหว่างนี้ </head>
ก็จะได้
<head>
<style>#overlay { position: absolute; top: 0px; left: 0px; background: #ccc; width: 100%; height: 100%; opacity: .75; filter: alpha(opacity=75); -moz-opacity: .75; z-index: 999; background: #fff url(https://i.imgur.com/KUJoe.gif) 50% 50% no-repeat; }</style>
</head>
เสร็จแล้วในส่วนของ <body></body> ให้ใส่ Code นี้ลงไป <div id=”overlay”></div> จะได้
<head>
<style>#overlay { position: absolute; top: 0px; left: 0px; background: #ccc; width: 100%; height: 100%; opacity: .75; filter: alpha(opacity=75); -moz-opacity: .75; z-index: 999; background: #fff url(https://i.imgur.com/KUJoe.gif) 50% 50% no-repeat; }</style>
</head>
<body>
<div id=”overlay”></div>
</body>
ต่อมาขั้นตอนสุดท้ายให้ใส่ Code jQuery ต่อจากส่วนของ Body จะได้ดังนี้
<head>
<style>#overlay { position: absolute; top: 0px; left: 0px; background: #ccc; width: 100%; height: 100%; opacity: .75; filter: alpha(opacity=75); -moz-opacity: .75; z-index: 999; background: #fff url(https://i.imgur.com/KUJoe.gif) 50% 50% no-repeat; }</style>
</head>
<body>
<div id=”overlay”></div>
<script>
$(function (){
//page load$(“#overlay”).fadeOut();$(“.main-contain”).removeClass(“main-contain”);
});
</script>
</body>