شرح كود

في الجزء الأول من الكود:

$(document).ready(function () {
    droopy();
    $('.preloader-it > .la-anim-1').addClass('la-animate');
});

 يتم إنتظار تحميل الصفحة بالكامل من خلال التابع ready في مكتبة jQuery، ثم يتم البحث عن عنصر ما من خلال المحدد .preloader-it > .la-anim-1 ويتم إضافة الصنف la-animate له، بالنسبة للدالة droopy فيبدو أنها دالة خاصة موجودة في جزء آخر من الكود أو في ملف جافاسركيبت آخر، لذلك لا يمكنني معرفة ما تفعله بالضبط.

أما في الجزء الثاني من الكود:

$(window).on("load", function () {
    // ...
});

هنا يتم إنتظار تحميل الصفحة بالكامل (متضمنه الصور والـ frame .. إلخ).

بعد ذلك يتم إنتظار نصف ثانية (500 ms) ثم يتم إخفاء العنصر .preloader-it ببطئ

$(".preloader-it").delay(500).fadeOut("slow");

بعد ذلك يتم تخزين كل العناصر التي لديها الصنف .progress-anim في متغير progressAnim، ويتم التأكد من وجود عنصر واحد على الأقل من خلال جملة if 

var progressAnim = $('.progress-anim');
if (progressAnim.length > 0) {
    // ...
}

ثم يتم المرور على كل عنصر من العناصر التي تم تخزينها في الخطوة السابقة ويتم إستخدام مكتبة waypoints ليتم تنفيذ دالة عندما يظهر كل عنصر من هذه العناصر على الشاشة

for (var i = 0; i < progressAnim.length; i++) {
    // ... 
}

وما تقوم به هذه الدالة هو البحث عن كل العناصر التي يمكن الوصول إلها عبر المحدد .progress-anim .progress-bar ويتم تغير عرض width كل عنصر من هذه العناصر بالقيمة الموجودة في الخاصية aria-valuenow

$this.waypoint(function () {
    var progressBar = $(".progress-anim .progress-bar");
    for (var i = 0; i < progressBar.length; i++) {
        $this = $(progressBar[i]);
        $this.css("width", $this.attr("aria-valuenow") + "%");
    }
}, {
    triggerOnce: true,
    offset: 'bottom-in-view'
});

يمكنك معرفة المزيد عن مكتبة waypoints من خلال توثيقها الرسمي من هنا.

يعتمد هذا الكود على بعض المكتبات ويستخدم مكتبة jquery أيضاً ولكن الكود الأساسي عبارة عن

• تنفيذ بعض ال animations الخاصة بالكلاس 'la-animate' عند تحميل ال html فقط

  $(document).ready(function () {
      droopy();
      $('.preloader-it > .la-anim-1').addClass('la-animate');
  }); 
  //الكود السابق هو المسئول عن ذلك

   

• عند إنتهاء تحميل الموقع من صور وملفات سيتم إختفاء ال preloader تدريجياً

• وهناك أيضاً عناصر Progress Bar يتغير عرضه بواسطة ال scroll عن طريق المكتبة wayPoint

  $(window).on("load", function () {
      $(".preloader-it").delay(500).fadeOut("slow"); //تدريجياً preloader  هنا يتم إختفاء ال 
      /*Progress Bar Animation*/
      var progressAnim = $('.progress-anim'); //Progress Bar هنا الكود الخاص بال 
      if (progressAnim.length > 0) { 
          for (var i = 0; i < progressAnim.length; i++) {
              var $this = $(progressAnim[i]);
              $this.waypoint(function () {
                  var progressBar = $(".progress-anim .progress-bar");
                  for (var i = 0; i < progressBar.length; i++) {
                      $this = $(progressBar[i]);
                      $this.css("width", $this.attr("aria-valuenow") + "%");
                  }
              }, {
                  triggerOnce: true,
                  offset: 'bottom-in-view'
              });
          }
      }
  });