ساخت لودینگ

ساخت لودینگ تا زمان لود شدن کامل وب سایت.

سلام امروز یه آموزش جدید در نظر گرفتم که خودمم تازه روش کار کردم .

در مرحله اول شما باید بلافاصله بعد از تگ بادی body این سه خط کد رو قرار بدید.

<div id="loading">
  <img id="loading-image" src="<?php echo get_template_directory_uri(); ?>/images/loading.gif" alt="Loading..." />
</div>

<img id="loading-image" src="<?php echo get_template_directory_uri(); ?>/images/loading.gif" alt="Loading..." />

</div>

سپس در مرحله بعد این چند خط کد رو داخل فایل style.css خودتون قرار میدید.

#loading {
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   position: fixed;
   display: block;
   opacity: 0.7;
   background-color: #fff;
   z-index: 99;
   text-align: center;
}

#loading-image {
  position: absolute;
    top: 50%;
    left: 50%;
  z-index: 99999999;
}

#loading {

width: 100%;

height: 100%;

top: 0;

left: 0;

position: fixed;

display: block;

opacity: 0.7;

background-color: #fff;

z-index: 99;

text-align: center;

}

#loading-image {

position: absolute;

top: 50%;

left: 50%;

z-index: 99999999;

}

و در مرحله آخر شما باید اسکریپ مرتبط کننده رو در کد هاتون قرار بدید ، پیشنهاد می کنم بلافاصله بعد از کد مرحله اول لودینگ قرار بدید.

<script type="text/javascript">
$(function() {
    $(window).on("load", function() {
        $('#loading').hide();
    });
});
</script>

$(function() {

$(window).on("load", function() {

$('#loading').hide();

});

</script>

برای داشتن یه عکس لودینگ می تونید یه فایل لودینگ آنلاین بسازید یا یه دونه دانلود کنید و ازش استفاده کنید.

چرا لودینگ ؟

گاهی به علت حجم زیاد وب سایت ، و سرعت های نا متوازن کاربران ، نمایش اطلاعات وب سایت به صورت تکه تکه و پاره پاره چندان خوشایند نیست ، به همین علت جهت کمک به زیبایی وب سایت و نمایش کامل وب سایت به مخاطب ازین روش استفاده می شود.