برنامج JS Progress Loading Animation هو عملي الشخصي. إذا لم تكن مكتوبة بشكل جيد ، فيمكنك الرجوع إليها ، ولكن بدون إذن ، يرجى عدم استخدامه لأغراض أخرى!
لقد كتبت تحديثًا في الصفحة الرئيسية لتحميل الرسوم المتحركة في الصباح. أردت استخدامه على مدونتي. لقد وجدت أن حديقة المدونة تم تحميلها بسرعة كبيرة ولم تتمكن من رؤية تأثير الرسوم المتحركة على الإطلاق. أنا فقط تحميل "كامل". ننسى ذلك ، لا تجعل المدونة منتفخة للغاية!
لذلك كتبت صفحة تجريبية وأضفت iframe إلى الجسم لتحميل مواقع الويب الكبيرة ، حتى أتمكن من رؤية التأثير!
أصبح وقت التشغيل لفتح الرسوم المتحركة CSS مع Safari متزامن. لا أعرف السبب ، لكن الاختبار المحلي على ما يرام (من فضلك أعطني بعض النصائح!) ، لا توجد مشكلة مع Chrome و Firefox ، لكنني لم أختبر أي
إحصائيات وقت التحميل ، استخدمت خاصية الأداء لكائن Windows ، وهي طريقة تستخدم خصيصًا لحساب الوقت المحدد. هذا هو وصف MDN لخاصية الأداء.
مبدأ التنفيذ لهذا المثال بسيط نسبيًا ، لكنه لا يعرض حقًا تقدم التحميل وفقًا لحجم الملف. إنه يغير فقط تقدم العرض وفقًا لحالة المستند. readyState عندما يتم تشغيل الحدث المستند. في الواقع ، هناك طريقة أخرى أكثر موثوقية ، باستخدام حدث التقدم لمثيل لكائن XMLHTTPrequest لتفسير XMLHTTPREQUEST بالتفصيل ، مثل:
var request = new xmlhttprequest () ؛ request.onprogress = function (e) {if ( // محملة ، يمثل المجموع الحجم والحجم الإجمالي الذي تم تحميله}}}إنه لأمر مزعج للغاية التنفيذ مع الطريقة أعلاه ، ولا يمكنه تحقيق تقدم حقيقي بنسبة 100 ٪ ، لذلك تظاهرت بأنني مزيف قليلاً ، ولا حاجة إليه!
يستخدم هذا المثال أيضًا مستند. إليكم ملخصي: ملخص لطريقة القراءة وكتابة أنماط CSS مع JS الأصلي
فيما يتعلق بتنفيذ الرسوم المتحركة CSS ، يرجى قراءة الكود بنفسك. إنه رمز بسيط للغاية. إذا كنت تواجه صعوبة في قراءتها ، فمن المستحسن تعويض أساسيات CSS. سأقدم بعض المعلومات العملية. موقع CSS الصيني المرجعي دليل. لدي مهارات تعبير محدودة ، لذلك لن أمضغ عليها هنا.
هنا هو رمز كامل + العرض التوضيحي:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> sufu's Works </title> <script> document.onReadyStatechang $ id ('preloader_line'). FirstElementChild ، preloader = $ id ('preloader') ، preloader_center = $ id ('preloader_center') ، preloader_btn = $ id ('preloader_btn') ، preloading = $ id ('preloader. if (document.readyState == "Interactive") {loading (1،110،50) ؛ } if (document.ReadyState == "COMMPLED") {loading (5،120،16.7) ؛ preloader_loading.id = 'preloader_loaded' ؛ preloader_loading.innerhtml = 'loading complete'+'<br/>'+'باستخدام:'+performance.now (). tofixed (3)+'ms' ؛ preloader_btn.innerhtml = 'ente r' ؛ preloader_btn.style.borderBottom = '4px solid green' ؛ preloader_btn.style.fontStyle = 'REHERIT' ؛ preloader_btn.style.fontsize = '24px' ؛ if (document.stylesheets [0] .inSerTrule) {document.stylesheets [0] .inserTrule ('#preloader_btn: hover {border-bottom: 4px solid green ؛ border-radius: 60px ؛ color: red ؛}' ، 0) ؛ } آخر {// متوافق مع document.stylesheets [0] .addrule ('#preloader_btn: hover {border-bottom: 4px solid green ؛ border-radius: 60px ؛ color: red ؛}' ، 0) ؛ } preloader_btn.onclick = function () {var opitaty = 1 ، id ؛ دالة إخفاء () {if (التعتيم <= 0) {clearTimeOut (id) ؛ preloader.style.display = 'none' ؛ document.body.style.overflow = 'auto' ؛ يعود؛ } العتامة -= 0.1 ؛ preloader.style.Opacity = التعتيم ؛ id = setTimeOut (function () {Hide () ؛} ، 50) ؛ } يخفي()؛ } ؛ } تحميل الوظيفة (الخطوة ، الحد الأقصى ، الوقت) {if (width> = max) {clearTimeOut (id) ؛ if (max> = 120) {preloader_line.parentnode.style.display = 'none' ؛ } يعود؛ } العرض += الخطوة ؛ preloader_line.style.width = width+'px' ؛ id = setTimeOut (function () {loading (step ، max ، time) ؛} ، time) ؛ }}} ؛ </script> <style> body {overflow: Hidden ؛ } #preloader {position: absolute ؛ العرض: 100 ٪ ؛ الارتفاع: 100 ٪ خلفية اللون: أبيض. Z-index: 999 ؛ } #preloader_center {position: absolute ؛ اليسار: 0 ؛ اليمين: 0 ؛ أعلى: 0 ؛ العرض: 150 بكسل ؛ الارتفاع: 75 بكسل ؛ الهامش: السيارات ؛ } #preloader_loading {الموضع: absolute ؛ اليسار: 0 ؛ اليمين: 0 ؛ أعلى: 45 بكسل ؛ الهامش: السيارات ؛ العرض: 96 بكسل ؛ الارتفاع: 30 بكسل ؛ } #preloader_loaded {position: absolute ؛ اليسار: 0 ؛ اليمين: 0 ؛ أعلى: 45 بكسل ؛ الهامش: السيارات ؛ حجم الخط: 12 بكسل ؛ محاذاة النص: المركز ؛ ارتفاع الخط: 30 بكسل ؛ } #preloader_loading span {position: absolute ؛ العرض: 10px ؛ الارتفاع: 2px ؛ أعلى: 0 ؛ أسفل: 0 ؛ الهامش: السيارات ؛ خلفية اللون: #9B59B6 ؛ الرسوم المتحركة: تحميل 1.5s لا نهائي. } #preloader_loading span: nth-child (2) {left: 12px ؛ الرسوم المتحركة الولادة: .1S ؛ } #preloader_loading span: nth-child (3) {left: 24px ؛ الرسوم المتحركة الولادة: .2S ؛ } #preloader_loading span: nth-child (4) {left: 36px ؛ الرسوم المتحركة الولادة: .3S ؛ } #preloader_loading span: nth-child (5) {left: 48px ؛ الرسوم المتحركة الولادة: .4S ؛ } #preloader_loading span: nth-child (5) {left: 48px ؛ الرسوم المتحركة الولادة: .4S ؛ } #preloader_loading span: nth-child (5) {left: 48px ؛ الرسوم المتحركة الولادة: .4S ؛ } #preloader_loading span: nth-child (5) {left: 48px ؛ الرسوم المتحركة الولادة: .4S ؛ } #preloader_loading span: nth-child (4) {left: 36px ؛ الرسوم المتحركة الولادة: .3S ؛ } #preloader_loading span: nth-child (5) {left: 48px ؛ الرسوم المتحركة الولادة: .4S ؛ } #preloader_loading span: nth-child (5) {left: 48px ؛ الرسوم المتحركة الولادة: .4S ؛ } #preloader_loading span: nth-child (5) {left: 48px ؛ الرسوم المتحركة الولادة: .4S ؛ } #preloader_loading span: nth-child (4) {left: 36px ؛ الرسوم المتحركة الولادة: .3S ؛ } #preloader_loading span: nth-child (5) {left: 48px ؛ الرسوم المتحركة الولادة: .4S ؛ } #preloader_load span: nth-child (6) {left: 50px ؛ الرسوم المتحركة الولادة: .5S ؛ } #preloader_loading span: nth-child (7) {left: 62px ؛ الرسوم المتحركة الولادة: .6S ؛ } #preloader_loading span: nth-child (8) {left: 74px ؛ الرسوم المتحركة الولادة: .7S ؛ } #preloader_loading span: nth-child (9) {left: 86px ؛ الرسوم المتحركة الولادة: .8S ؛ } @keyframes loading {0 ٪ {الارتفاع: 2px ؛ الخلفية:#9b59b6 ؛} 15 ٪ {الارتفاع: 20px ؛ الخلفية:#3498db ؛} 50 ٪ {الارتفاع: 2px ؛ الخلفية:#9b59b6 ؛ 1000px ؛} #preloader_btn {position: absolute ؛ اليسار: 0 ؛ اليمين: 0 ؛ أعلى: 0 ؛ الهامش: السيارات ؛ العرض: كتلة ؛ العرض: 122px ؛ الارتفاع: 40 بكسل ؛ حجم الخط: 14px ؛ محاذاة النص: المركز ؛ رفع الخط: 40 بكسل ؛ المؤشر: مؤشر. اللون: #9B59B6 ؛ على غرار الخط: مائل ؛ -بكيت ترانس: الكل .5S ؛ -Moz-transition: All .5s ؛ -MS الانتقال: الكل .5S ؛ -الران: جميع .5S ؛ الانتقال: الكل .5S ؛ } #preloader_line {position: absolute ؛ اليسار: 0 ؛ اليمين: 0 ؛ أعلى: 40 بكسل ؛ الهامش: السيارات ؛ العرض: 120 بكسل ؛ الارتفاع: 2px ؛ الحدود: 1 بكسل خضراء صلبة. } #preloader_line span {display: block ؛ الارتفاع: 2px ؛ العرض: 0 ؛ خلفية اللون: الأخضر. } </style> </head> <body> <div id = "preloader"> <div id = "preloader_center"> <span id = "preloader_btn"> loading ... </span> <span id = "preloader_line"> </span> </div id = id = "preloader_loading"> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> </viv> </viv> </viv> <frame src = "http://jd.com"ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.