السلام عليكم تحياتى لكل ال موجدين عندى فكرة وهيا حابب اعرض منظر معين او اعرض شكل معين فى وقت تحميل الصفحة الشكل ده يظهر للمستخدم وعند انتهاء التحميل بيختفى ازاى اعملها باالجافا سكريبت وشكرا ليكم
اريد تنفيذ فكرة باالجافا سكريبت
جرب هذا الكود هو الذي استخدمه انا قم بتغيير الصورة بالصورة التي تريد و هو يعمل فقط في الصفحة التي تضعه فيها يعني اذا تريد ظهوره في كل الصفحات الاخرى يجب وضعه في كل صفحة منها
<script src='https://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'></script>
<script>
jQuery(document).ready(function() {
var sec = 10
var timer = setInterval(function() {
$("#mdtimer span").text(sec--);
if (sec == 0) {
$("#makingdifferenttimer").delay(1000).fadeIn(1000);
$("#mdtimer").hide(1000) .fadeOut(fast);}
},1000);
});
</script>
<center>
<div id="makingdifferenttimer" style="display: none;">
هنا يتم إضافة محتوى الصفحة او المحتوى الذي تريدون اخفاءه
</div>
<div id="mdtimer"><div style="font-size: large;">
<b>المرجو انتظار <span>10</span> ثواني</b>
<img alt='menu icon' class='iconhome' height='300px' src='https://1.bp.blogspot.com/-XPbTZZQOfLs/YFI6xHUOdfI/AAAAAAAATnE/tjvo3eGvmwM5bCug-yano5xn33mOaEFkwCLcBGAsYHQ/w640-h408/tathwir-logo.jpg' width='100%'><img/>
</div>
</div>
</center>
وذا كنت تستخدم بلوجر هناك اضافة اخرى تسمى تاثير إنظار التحميل تعمل للمدونة ككل بكود واحد فقط تضيفه للقالب.
و عليكم السلام و رحمة الله ,
يمكن اختصار وصف فكرتك في لفظ الـ preloader المستعمل عادة في وصف هاته الفكرة .
و سيمكن تلخيص منطق عملها في المراحل التالية :
- إنشاء بنية الـ preloader و تعريفه ضمن بنية الـ html .
- تطبيق تنسيقات عليه و التأكد من ظهوره بالشكل الافتراضي و إختفاء كل ما هو دونه من محتوى .
- استعمال الجافاسكربت لإخفاء الـ preloader و إظهار المحتوى بعد إكتمال تحميل الصفحة , يمكن الإستعانة بالحدث onload في الجافاسكربت , كما يمكن استدعاء الدالة التي تقوم بالموصوف في المرحلة الأخيرة بعد مدة زمنية معينة تقدر كزمن تحميل الصفحة .
مثال عملي :
- بداية سنحتاج إنشاء بنية الشكل و إعطاءه بعض التنسيقات و ليكن على سبيل المثال :
<div class="preloader"></div> <body id="stop-scrolling">محتوى ما.</body>
- ثم لنقم بتطبيق بعض التنسيقات الإضافية عليه :
#stop-scrolling {
height: 100% !important;
overflow: hidden !important;
}
.preloader {
position: absolute;
top: 0;
left: 0;
bottom:0;
right:0;
width: 100%;
height: 100vh;
z-index: 99999999;
background-image: url('../img/my-loader.gif'); /* مسار أيقونة */
background-repeat: no-repeat;
background-color: #FFF;
background-position: center;
}
- الان لن نحتاج إلا لإظهار عنصر الـ preloader قبل تحميل الصفحة أو أثناءها و إخفاءه بعد تحميلها , و سيلازم هذا إخفاء المحتوى قبل تحميل الصفحة أو أثناءها و إظهاره بعد تحميلها , بحيث سيتبع الكود منطقا مشابها (سنقوم بإستعمال جي كويري في المثال):
function preloaderFadeOutInit(){
$('.preloader').fadeOut('slow');
$('body').attr('id','');
}
// يتم استدعاء هاته الدالة عندتحنميل الصفحة
jQuery(window).on('load', function () {
(function ($) {
preloaderFadeOutInit();
})(jQuery);
التعليقات