عندما نتصفح الويب، غالبًا ما نرى مطالبة التحميل التي تظهر عند تحميل البيانات. في الواقع، مبدأ هذه الوظيفة بسيط للغاية، أي أن DIV يغطي الصفحة الحالية، ثم يتم عرض التحميل على طبقة DIV المغطاة.
1. الصفحة الحالية:
انسخ رمز الكود كما يلي:
<div><a href="#" onclick="showLoading()">جارٍ التحميل</a></div>
2. طبقة القناع:
انسخ رمز الكود كما يلي:
<div id="over"></div>
3. تحميل طبقة العرض:
انسخ رمز الكود كما يلي:
<div id="layout"><img src="//files.VeVB.COm/file_images/article/201311/2013112931.gif" /></div>
الكود الشامل:
انسخ رمز الكود كما يلي:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<الرأس>
<العنوان></العنوان>
<نمط النوع = "نص/CSS">
.الحالي {
حجم الخط: 20 بكسل؛
}
.زيادة {
العرض: لا شيء؛
الموقف: مطلق؛
أعلى: 0؛
اليسار: 0؛
العرض: 100%؛
الارتفاع: 100%؛
لون الخلفية: #f5f5f5؛
العتامة: 0.5؛
مؤشر z: 1000؛
}
.تَخطِيط {
العرض: لا شيء؛
الموقف: مطلق؛
أعلى: 40%؛
اليسار: 40%؛
العرض: 20%؛
الارتفاع: 20%؛
مؤشر z: 1001؛
محاذاة النص:مركز؛
}
</نمط>
<نوع البرنامج النصي = "نص/جافا سكريبت">
عرض الدالة التحميل ()
{
document.getElementById("over").style.display = "block";
document.getElementById("layout").style.display = "block";
}
</script>
</الرأس>
<الجسم>
<div><a href="#" onclick="showLoading()">جارٍ التحميل</a></div>
<div id="over"></div>
<div id="layout"><img src="//files.VeVB.COm/file_images/article/201311/2013112931.gif" /></div>
</الجسم>
</html>
التأثير النهائي:
لقد رأيت أيضًا طريقة تنفيذ أخرى على الإنترنت وأعتقد أن الفكرة جيدة، وهي استخدام JS لتغيير قيمة علامة html بشكل مستمر لتحقيق تأثير مطالبات التحميل، وفقًا لفكرته الكود هو كما يلي:
انسخ رمز الكود كما يلي:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<الرأس>
<العنوان></العنوان>
<!-- <script src="Scripts/jquery-1.8.2.js"></script>-->
<نمط النوع = "نص/CSS">
# السل {
العرض: 100%؛
الارتفاع: 100%؛
ارتفاع الخط: 10 بكسل؛
}
# السل تر تد {
محاذاة النص: مركز؛
}
شريط التقدم {
عائلة الخط: Arial؛
وزن الخط: أكثر جرأة؛
اللون: رمادي؛
لون الخلفية: أبيض؛
الحشو: 0 بكسل؛
نمط الحدود: لا شيء؛
}
.في المئة {
عائلة الخط: Arial؛
اللون: رمادي؛
محاذاة النص: مركز؛
عرض الحدود: متوسط؛
نمط الحدود: لا شيء؛
}
</نمط>
<نوع البرنامج النصي = "نص/جافا سكريبت">
شريط فار = 0؛
var step = "||";
/*
*الطريقة الأولى هي: $(document).ready(function(){.....});
*/
//$(وظيفة () {
// تقدم()؛
//)؛
/*
*الطريقة الثانية
*/
//window.onload = الوظيفة () {
// تقدم()؛
//
/*
*الطريقة الثالثة تحاكي $(document).ready(function(){.....});
*/
(وظيفة () {
var ie = !!(window.attachEvent && !window.opera);
var wk = /webkit//(/d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
فار fn = [];
var run = function () { for (var i = 0; i < fn. length; i++) fn[i]() };
فار د = وثيقة؛
د. جاهز = الوظيفة (و) {
إذا (!ie && !wk && d.addEventListener)
return d.addEventListener('DOMContentLoaded', f, false);
إذا (fn.push(f) > 1) العودة؛
إذا (أي)
(وظيفة () {
حاول { d.documentElement.doScroll('left');
قبض (يخطئ) { setTimeout(arguments.callee, 0 });
})();
وإلا إذا (أسبوع)
فار تي = setInterval(function () {
إذا (/^(محمل|مكتمل)$/.test(d.readyState))
ClearInterval(t), run();
}, 0);
};
})();
وثيقة.جاهزة (وظيفة () {
تقدم()؛
});
تقدم الوظيفة () {
شريط = شريط + 2؛
خطوة = خطوة + "||"؛
document.getElementById("percent").value = bar + "%";
document.getElementById("progressbar").value = step;
إذا (شريط <= 98) {
setTimeout("progress()", 100);
}
}
</script>
</الرأس>
<الجسم>
<معرف الجدول = "تيب">
<تر>
<TD>
<نوع الإدخال = "نص" حجم = "50" معرف = "نسبة مئوية" /></td>
</tr>
<تر>
<TD>
<نوع الإدخال = "نص" حجم = "50" id = "شريط التقدم" /></td>
</tr>
</الجدول>
</الجسم>
</html>
التأثير النهائي: