echo.js จาวาสคริปต์บริสุทธิ์น้ำหนักเบาขี้เกียจโหลดรหัสอินสแตนซ์
การสาธิต
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> javascript ภาพเรียบง่าย Lazy Loading Library Echo.js </title> <style> ความสูง: 490px; ความเป็นมา: url (images/loading.gif) 50% ไม่ซ้ำ;} </style> </head> <body> <h1 style = "ระยะขอบ: 40px; ตัวอักษร: 32px microsoft yahei; text-align: center;"> img simple image img. data-echo = "images/big-1.jpg"> <img src = "images/blank.gif" data-echo = "images/big-2.jpg"> <img src = "images/blank.gif" data-echo = "big-3.jpg"> src = "images/blank.gif" data-echo = "images/blank.gif" data-echo = "images/big-5.jpg"> <img src = "images/blank.gif" data-echo = "big-6.jpg"> <img src = "images/blank.gif" src = "js/echo.min.js"> </script> <script> echo.init ({ออฟเซ็ต: 0, เค้น: 0}); </script>แอปพลิเคชัน
1. แนะนำ JS และเริ่มต้น
<script src = "{sh :: pub} js/echo.min.js"> </script> <script> echo.init ({ออฟเซ็ต: 0, เค้น: 0}); </script>2. แนบแอตทริบิวต์กับรูปภาพ
<img src = "{sh :: pub} img/common/blank.gif" data-echo = "{sh: $ goods.logoimg}">>3. ตั้งค่าพื้นหลังเริ่มต้นสำหรับภาพที่ไม่ได้โหลด GIF แบบไดนามิก
.LAZY {WIDTH: 100%; ความสูง: 100%; พื้นหลัง: url ({sh :: pub} img/common/loading.gif) 50%ไม่ต้องทำซ้ำ;}สะดวกมากและใช้งานได้จริง
เพื่อปรับปรุงความเร็วในการเปิดเว็บเพจคุณสามารถเพิ่มประสิทธิภาพรูปภาพที่อัปโหลดได้
หน้าเว็บช้าไม่มีอะไรมากไปกว่านั้นแบบสอบถามช้ารูปภาพกำลังโหลดช้ารูปภาพไม่ได้เต็มไปด้วยความล่าช้าและข้อมูลของภาพมีขนาดใหญ่เกินไป
ขึ้นอยู่กับเหตุผลเหล่านี้ค่อยๆแก้ไขพวกเขา
ปรับปรุงประสบการณ์ผู้ใช้
รหัสตัวอย่างข้างต้นสำหรับ JavaScript บริสุทธิ์น้ำหนักเบาขี้เกียจโหลดของ echo.js เป็นเนื้อหาทั้งหมดที่ใช้ร่วมกันโดยตัวแก้ไข ฉันหวังว่ามันจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น