บทความนี้อธิบายถึงเอฟเฟกต์การโหลดก่อนที่หน้าโหลดโดย JS จะถูกโหลด แบ่งปันสำหรับการอ้างอิงของคุณดังนี้:
1. รหัส JS:
// รับความสูงและความกว้างที่มองเห็นได้ของหน้าเบราว์เซอร์ var _pageheight = document.documentelement.clientheight, _pagewidth = document.documentelement.clientwidth; // คำนวณระยะห่างระหว่างกล่องโหลดจากด้านบนและด้านซ้าย - (_pageheight - 61) / 2: 0, _loadingleft = _pagewidth> 215? (_pagewidth - 215)/2: 0; // loadinghtml เนื้อหาที่กำหนดเองที่แสดงก่อนหน้าหน้าไม่โหลด var _loadinghtml = '<div id = "loadingdiv" style = "ตำแหน่ง: left: 0; width: 100%; 'PX; TOP: 0; พื้นหลัง:#F3F8FF; Opacity: 0.8; Padding-Left: 50px; การโหลดเอฟเฟกต์เป็นเอกสารแสดงผล (_loadinginghtml); // window.onload = function () {// var loadingmask = document.getElementById ('loadingDiv'); // loadingMask.parentNode.RemoveChild สถานะการโหลดเป็นฟังก์ชั่นที่สมบูรณ์แบบสมบูรณ์ () {if (document.readyState == "เสร็จสมบูรณ์") {var loadingMask = document.getElementById ('loadingDiv'); loadingmask.parentNode.removeChild (loadingmask); -2. ผล:
ภาพประกอบ:
เพียงแค่ใส่รหัส JS ในส่วนนี้ลงใน <head> ในตอนท้าย
รูปแบบของเอฟเฟกต์การโหลดสามารถแก้ไขได้ตามสไตล์ของคุณเอง คุณต้องค้นหาภาพ gif loading.gif ด้วยตัวคุณเอง (ส่วนใหญ่มีให้บริการออนไลน์)
คลิกที่นี่เพื่อดาวน์โหลดรหัสอินสแตนซ์ตัวอย่างสมบูรณ์
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ jQuery ผู้อ่านที่มีความสนใจในเว็บไซต์นี้สามารถดูหัวข้อ: "บทสรุปของเอฟเฟกต์พิเศษคลาสสิกทั่วไปของ jQuery", "บทสรุปของปลั๊กอินที่ใช้กันทั่วไปและการใช้งานของ jQuery", "บทสรุปของ JQUERY Table (Table) ทักษะการทำงานสรุป เอฟเฟกต์พิเศษและเทคนิค "," บทสรุปการใช้ Ajax ใน jQuery "," สรุปของแอนิเมชั่น jQuery และการใช้เอฟเฟกต์พิเศษ "และ" สรุปการใช้งาน jQuery Selector "
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม jQuery ของทุกคน