English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
برنامج js تحميل التأثير هو عمل شخصي، كتبته بشكل سيء، يمكنك الاستعانة به، ولكن لا تستخدمه لأغراض أخرى دون إذني!
كتبت أثر تحميل الصفحة الرئيسية في الصباح، كنت أرغب في استخدامه في مدونتي، لكن وجدت أن Zong Yan يتم تحميله بسرعة كبيرة، لا يمكن رؤية تأثير التحرك، يتم تحميل 'Complete' مباشرة، لذا، لا أريد أن أجعل المدونة ضخمة!
لذلك كتبت صفحة عرض، أضفت إطار منبثق في الجسم لتحميل موقع أكبر، وبالتالي يمكن رؤية التأثير!
فتح Safari يبدو أن وقت عرض CSS التأثير أصبح متزامناً، لا أعرف السبب، لا يوجد مشكلة في الاختبار المحلي (يرجى توجيه النباهة!)، لا يوجد مشكلة باستخدام Chrome أو Firefox، ولكن لم أختبر IE
استخدمت خاصية performance للوحدة Windows لقياس وقت التحميل، وهي طريقة مخصصة لحساب الوقت الدقيق، هذا هو MDN حولخصائص أداءالوصف
مبدأ تنفيذ هذا المثال بسيط جدًا، ولكن ليس حقيقيًا يعرض تقدم التحميل بناءً على حجم الملف، بل يغير عرض التقدم بناءً على حالة document.readyState عند تحفيز حدث document.onreadystatechange. في الواقع، هناك طريقة أكثر موثوقية، باستخدام حدث progress للوحدة XMLHttpRequest، الشرح المفصل لـ XMLHttpRequest، مثل:
var request = new XMLHttpRequest();
request.onprogress = function (e) {
if(e.lengthComputable){ // lengthComputable يشير إلى ما إذا كان لديك حجم للملف، القيمة هي true،false
progress.innerHTML = Math.round(100 * e.loaded / e.total) + '%'; // loaded،total يشير إلى الحجم الذي تم تحميله والحجم الإجمالي
}
}
يكون تنفيذ هذه الطريقة معقدًا جدًا، ولم يتمكن من تحقيق تقدم التحميل الحقيقي بنسبة 100%، لذا قررت أن أكون مجردًا قليلاً، وألغي استخدامه!
هذا المثال يستخدم أيضًا طريقة document.styleSheets[0].insertRule()، وقد قمت بتلخيصها هنا: تلخيص طريقة قراءة وكتابة النمط CSS باستخدام JavaScript
فيما يتعلق بتنفيذ CSS animations، يرجى الرجوع إلى الكود الخاص بك، وهو كود بسيط جدًا، إذا كنت تجد صعوبة في فهمه، يُنصحك بتعلم أساسيات CSS، أقدم لك بعض النصائح العملية،موسوعة CSS باللغة الصينية، وقدرتي على التعبير محدودة، لذا لن أطيل الحديث هنا
هذا هو الكود الكامل + العرض:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>سفور العمل</title>
<script>
document.onreadystatechange = function () {
function $id(id){return document.getElementById(id)}
var width = 0,id;
preloader_line = $id('preloader_line').firstElementChild,
preloader = $id('preloader'),
preloader_center = $id('preloader_center'),
preloader_btn = $id('preloader_btn'),
preloader_loading = $id('preloader_loading');
if (document.readyState == "interactive") {
loading(1,110,50);
}
if (document.readyState == "complete") {
loading(5,120,16.7);
preloader_loading.id = 'preloader_loaded';
preloader_loading.innerHTML = 'Loading Complete'+'<br/>'+'Using: '+performance.now().toFixed(3)+' ms';
preloader_btn.innerHTML = 'E N T E R';
preloader_btn.style.borderBottom = '4px solid green';
preloader_btn.style.fontStyle = 'inherit';
preloader_btn.style.fontSize = '24px';
if(document.styleSheets[0].insertRule){
//التوافق مع IE9 والإقليل
}
document.styleSheets[0].addRule('#preloader_btn:hover{border-bottom: 4px solid green;border-radius: 60px;color: red;}',0);
}
preloader_btn.onclick = function () {
var opacity = 1,id;
function hide(){
if(opacity<=0){
clearTimeout(id);
preloader.style.display = 'none';
document.body.style.overflow = 'auto';
return;
}
opacity -= 0.1;
preloader.style.opacity = opacity;
id = setTimeout(function(){
hide();
},50);
}
hide();
};
}
function loading(step,max,time){
if(width>=max){
clearTimeout(id);
if(max >= 120){
preloader_line.parentNode.style.display = 'none';
}
return;
}
width += step;
preloader_line.style.width = width+'px';
id = setTimeout(function(){
loading(step,max,time);
},time);
}
};
</script>
<style>
body{
overflow: hidden;
}
#preloader{
position: absolute;
width: 100%;
height: 100%;
background-color: white;
z-index: 999;
}
#preloader_center{
position: absolute;
left: 0;
right: 0;
الجزء العلوي: 0;
bottom: 0;
width: 150px;
height: 75px;
margin: auto;
}
#preloader_loading{
position: absolute;
left: 0;
right: 0;
top: 45px;
margin: auto;
width: 96px;
height: 30px;
}
#preloader_loaded{
position: absolute;
left: 0;
right: 0;
top: 45px;
margin: auto;
font-size: 12px;
محاذاة النص: مركز;
line-height: 30px;
}
#preloader_loading span{
position: absolute;
width: 10px;
height: 2px;
الجزء العلوي: 0;
bottom: 0;
margin: auto;
background-color: #9b59b6;
animation: loading 1.5s infinite ease-in-out ;
}
#preloader_loading span:nth-child(2){
الجزء الأيسر: 12 بوصة;
التأخير في التحريك: .1 ثانية;
}
#preloader_loading span:nth-child(3){
الجزء الأيسر: 24 بوصة;
التأخير في التحريك: .2 ثانية;
}
#preloader_loading span:nth-child(4){
الجزء الأيسر: 36 بوصة;
التأخير في التحريك: .3 ثانية;
}
#preloader_loading span:nth-child(5){
الجزء الأيسر: 48 بوصة;
التأخير في التحريك: .4 ثانية;
}
#preloader_loading span:nth-child(6){
الجزء الأيسر: 50 بوصة;
التأخير في التحريك: .5 ثانية;
}
#preloader_loading span:nth-child(7){
الجزء الأيسر: 62 بوصة;
التأخير في التحريك: .6 ثانية;
}
#preloader_loading span:nth-child(8){
الجزء الأيسر: 74 بوصة;
التأخير في التحريك: .7 ثانية;
}
#preloader_loading span:nth-child(9){
الجزء الأيسر: 86 بوصة;
التأخير في التحريك: .8 ثانية;
}
@keyframes loading {
0%{ارتفاع: 2 بوصة;خلفية: #9b59b6;}
15%{ارتفاع: 20 بوصة;خلفية: #3498db;}
50%{ارتفاع: 2 بوصة;خلفية: #9b59b6;}
100%{ارتفاع: 2 بوصة;خلفية: #9b59b6;}
}
iframe{عرض: 100%;ارتفاع: 1000 بوصة;}
#preloader_btn{
position: absolute;
left: 0;
right: 0;
الجزء العلوي: 0;
margin: auto;
display: block;
عرض: 122 بوصة;
ارتفاع: 40 بوصة;
حجم الخط: 14 بكسل;
محاذاة النص: مركز;
ارتفاع الخط: 40 بوصة;
مؤشر الفأرة: مؤشر;
لون: #9b59b6;
نمط الخط: مائل;
-webkit-الانتقال: جميع .5 ثانية;
-moz-الانتقال: جميع .5 ثانية;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
#preloader_line{
position: absolute;
left: 0;
right: 0;
top: 40px;
margin: auto;
width: 120px;
height: 2px;
border: 1px solid green;
}
#preloader_line span{
display: block;
height: 2px;
width: 0;
background-color: green;
}
</style>
</head>
<body>
<div id="preloader">
<div id="preloader_center">
<span id="preloader_btn">Loading...</span>
<span id="preloader_line">
<span></span>
</span>
<div id="preloader_loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<iframe src="http://jd.com"></iframe>
</body>
</html>
هذا هو نهاية محتوى هذا المقال، نأمل أن يكون قد ساعدكم في تعلم، ونأمل أن تدعموا ونتعاون مع دروس الصياغة.
البيان: محتويات هذا المقال تم جمعها من الإنترنت، وتعود حقوق الطبع والنشر إلى المالك الأصلي، تم جمع المحتويات من قبل المستخدمين على الإنترنت وتم تحميلها بشكل تلقائي، ولا تملك هذا الموقع حقوق الملكية، ولا يتم تعديل المحتويات بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية المتعلقة بذلك. إذا رأيت محتوى يشتبه في انتهاك حقوق النسخ، فأرجو إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) للإبلاغ، وتقديم الدليل على ذلك، وسيتم حذف المحتوى المزعوم فور التحقق منه.