รอให้โหลดสไตล์ CSS ของหน้าเนื้อหา HTML จะถูกโหลดแล้วแสดงตามรูปแบบที่สร้างขึ้นเพื่อหลีกเลี่ยงเอฟเฟกต์ภาพที่ไม่พึงประสงค์ที่เกิดจากการแสดงสไตล์ค่อยๆแสดงสไตล์หลังจากโหลดเนื้อหาที่เริ่มต้นและเพิ่มประสบการณ์ผู้ใช้
เพิ่มไฟล์ base-loading.js รหัสมีดังนี้
// รับความสูงและความกว้างที่มองเห็นได้ของหน้าเบราว์เซอร์ var _pageheight = document.documentelement.clientheight, _pagewidth = document.documentelement.clientwidth; // คำนวณระยะห่างระหว่างกล่องโหลดจากด้านบนและด้านซ้าย - (_pageheight - 61) / 2: 0, _loadingleft = _pagewidth> 215? (_pagewidth - 215)/2: 0; // การโหลดที่อยู่ gif var loadimagerul = "/content/loadjs/image/loading.gif"; // loadinghtml เนื้อหาที่กำหนดเองที่แสดงก่อนหน้าจะโหลด var _loadinghtml = '<div id = "loadingDiv" 'px; top: 0; พื้นหลัง:#f3f8ff; opacity: 1; ตัวกรอง: อัลฟ่า (opacity = 80); z-index: 10,000; Padding-Left: 50px; document.write (_loadinghtml); // พูดถึงสถานะการโหลดเพื่อเปลี่ยน document.onreadyStateChange = การโหลดเสร็จสิ้น; // ลบเอฟเฟกต์การโหลดเมื่อสถานะการโหลดเสร็จสมบูรณ์ฟังก์ชั่นเสร็จสมบูรณ์ () {ถ้า (document.readyState == "เสร็จสมบูรณ์") {var loadingmask = document.getElement loadingmask.parentNode.removeChild (loadingMask);}}เมื่อใช้งานคุณจะต้องแนะนำในหัวเท่านั้น
@*// โหลดเอฟเฟกต์แอนิเมชั่น JS*@
<script src = "~/content/loadjs/base-loading.js"> </script>
เอฟเฟกต์มีดังนี้: หลังจากการแนะนำเมื่อโหลดเนื้อหาและรูปแบบ HEML ภาพเคลื่อนไหวกำลังโหลดจะปรากฏขึ้นซึ่งจะปรากฏขึ้นหลังจากโหลดเพื่อหลีกเลี่ยงหน้าจอการพูดติดอ่างค่อยๆแสดงผล
การแสดงผลเสร็จสมบูรณ์และหน้าจอการแสดงผลจะปรากฏขึ้นในคราวเดียว
ข้างต้นคือสิ่งที่บรรณาธิการแนะนำให้คุณรู้จัก หลังจากโหลด EasyUI แล้วรูปแบบเนื้อหาการแสดงผลของเนื้อหา HTML จะปรากฏขึ้น ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!