echo.js pure javaScript خفيفة الوزن رمز التحميل الكسول
العرض التوضيحي
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> صورة بسيطة صورة javaScript Lazy Loading Library echo.js </title> <style> .demo img {width: 736px ؛ الارتفاع: 490 بكسل ؛ الخلفية: url (الصور/التحميل. data-echo = "Images/big-1.jpg"> <img src = "images/blank.gif" data-echo = "images/big-2.jpg"> <img src = "images/blank.gif" data-echo = "images/big-3.jpg"> <img src = src = "images/blank.gif" data-echo = "images/blank.gif" data-echo = "Images/big-5.jpg"> <img src = "images/blank.gif" data-echo = "picture/big-6.jpg"> <img src = "data.gif" data-echo- " src = "js/echo.min.js"> </script> <script> echo.init ({Offset: 0 ، Throttle: 0}) ؛ </script>طلب
1. تقديم JS وتهيئة
<script src = "{sh :: pub} js/echo.min.js"> </script> <script> echo.init ({Offset: 0 ، Throttle: 0}) ؛ </script>2. إرفاق السمات بالصورة
<img src = "{sh :: pub} img/common/blank.gif" data-echo = "{sh: $ goods.logoimg}">3. اضبط الخلفية الافتراضية للصور التي تم تفريغها ، صور GIF الديناميكية
.lazy {العرض: 100 ٪ ؛ الارتفاع: 100 ٪ ؛ الخلفية: url ({sh :: pub} img/common/loading.gif) 50 ٪ no-repeat ؛}مريحة للغاية وعملية.
لزيادة تحسين سرعة فتح صفحات الويب ، يمكنك تحسين الصور التي تم تحميلها.
صفحة الويب بطيئة ، إنها ليست أكثر من ذلك ، فإن الاستعلام بطيء ، يتم تحميل الصورة ببطء ، ولا يتم تحميل الصورة بالتأخير ، وبيانات الصورة كبيرة جدًا.
بناءً على هذه الأسباب ، حلها تدريجياً.
تحسين تجربة المستخدم.
رمز المثال أعلاه لـ JavaScript الخفيف الوزن البسيط Lazying Lazing of echo.js هو المحتوى الكامل الذي شاركه المحرر. آمل أن يعطيك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.