สวัสดีครับ ทุกๆท่าน วันนี้เอกคอม ก็มีเนื้อหาสาระมาฝากกันอีกแล้วครับ เป็นเรื่องราวเกี่ยวกับการ ทำเว็บไซต์  ซึ่งเจ้าเคล็ดลับที่เจ้ามาฝากกันวันนี้คือ การทำ 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>
jQuery Code
//page load
$(“#overlay”).fadeOut();
$(“.main-contain”).removeClass(“main-contain”);

อธิบายเพิ่มเติม ในหน้าที่เราต้องการสร้าง 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>