القائمة الرئيسية

الصفحات

كيفية إضافة تحميل صورة أثناء تحميل الصفحة؟



موقع على شبكة الانترنت هو مزيج من الرسومات المختلفة ، والمنزلق ، المغلق ، جافا سكريبت ، HTML ، Jquery الملفات الخ. ولكن في معظم الموقع نرى أنها لا تستخدم أي تحميل الرسوم المتحركة أو نسبة مئوية من وقت التحميل. في حالة وجود بعض الرسومات بشكل كبير وخاصة موقع التصوير الفوتوغرافي أثناء تحميل صفحة يستغرق وقتا أطول. يبدو محبطاً قليلاً لأنه بعد زيارة عدد قليل من الصفحات الزوار سوف تزول بسبب تأخير وقت التحميل. لهذا السبب سيتم تقليل عرض صفحة موقعك. هذا الشيء جعلني أفكر





للحصول على موقع جيد الأولوية الأولى يجب علينا تحسين الصور قالب لدينا، أوراق نمط minifying ومخطوطات. ولكن هذا مطلوب تغييرات كبيرة على قالب Blogger الخاص بك. ولكن معظمنا لا تريد أن تضحي تصميم القالب لدينا وأسلوب. لذلك أعتقد أنك ربما تفكر الآن في أي حل بديل؟ الحق!! 




لماذا لا نستخدم تحميل صفحة الرسوم المتحركة التي سوف تعطي القراء استراحة مع الرسوم المتحركة الجميلة؟ ما رأيك في عرض صورة gif لتحميل الصفحة أثناء تحميل الصفحة بأمان في خلفية صفحة الموقع؟




ويمكننا إنجاز هذه المهمة بجهد بسيط. أولا وقبل كل شيء لدينا لخلق أو العثور على صورة جميلة تحميل gif. إذا كنت خبيرا في تصميم الرسومات ثم يمكنك بسهولة إنشاء صفحة تحميل gif التي ستكون فريدة من نوعها. ومع ذلك لم يكن لديك الكثير من الموهوبين أو لديك معرفة حول خلق صورة متحركة. لأنه الآن يوم واحد هناك العديد من المواقع المتاحة عبر الشبكة حيث يمكننا بسهولة توليد تحميل صورة الرسوم المتحركة وتخصيصها وفقا للون قالب مدون الخاص بك. يمكنك زيارة المواقع أدناه وتوليد رغبتكم واحدة.


بعض المواقع


icons8

loading


طريقة التركيب




  • نتوجة الى المظهر ثم تعديل html ثم قم بالبحث عن /b:skin وضع الكود فوقة.



.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('Image URL HERE') 50% 50% no-repeat rgb(249,249,249);
}

قم بتغيير Image URL HERE بي رابط الصورة


  • ثم نبحث عن body ونضع الكود بعدة مباشرتا.


<div class="loader"></div>



  • ثم نقوم بالبحث عن /head وتضع الكود قبلة.

 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $(".loader").fadeOut("slow");
})
</script>





reaction:

تعليقات