آموزش ساخت loading در jQuery با کمک document is ready

آموزش ساخت loading در jQuery با کمک document is ready

 

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

برای این کار لازم است که از کد زیر استفاده کنید و در صفحه مرورگر خود با استفاده از ctrl+shift+I بخش console را مشاهده کنید.

 

$( document ).ready(function(){
  console.log("ready");
});
آموزش ساخت Loading در javascript
 

میتوانید این کد را به صورت خلاصه تر هم بنویسید.

در واقع $() همان کار ( document ).ready را انجام میدهد.

 

$( function(){
  console.log("ready");
});
ساخت loading در jquery
 

حال میتوانید این کد را بر روی کل کد های خود بنویسید زیرا میخواهیم تا زمانی که صفحه کامل load نشده، برخی المان ها را به کاربر نشان ندهد.

 

$( function(){
  console.log("ready");
  
  for (var i = 0;document.getElementsByTagName("LI").length > i; i++) {
    document.getElementsByTagName("LI")[i].innerHTML = "fatemeh saberi";
  }

  var hide = 0;
  function my_function(){
    if (hide == 0){
      document.getElementById("list").style.visibility = "hidden";
      hide=1;
    }
    else {
      document.getElementById("list").style.visibility = "visible";
      hide=0;
    }
  }
});

 

با گذاشتن گیف loading در اول صفحه خود قبل از load شدن کامل صفحه، gid loading بچرخد تا صفحه کامل load شود تا در نهایت صفحه شما به صورت کامل به کاربر نشان داده شود.

برای شروع کار یک div به وجود آورده و تگ img را در آن ایجاد کنید.

 

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="lesson.css">
  <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>
</head>
<body>
  <div id="loading"><img src="loading.gif"></div>

<div>
<div onclick="my_function()">
  <p class="test">آموزش رایگان جاوا اسکریپت</p>
</div>
<div>
  <p class="test" id="hideText">آموزش رایگان جاوا اسکریپت</p>
</div>
<div>
  <p class="test">آموزش رایگان جاوا اسکریپت</p>
</div>
<div>
  <p class="test">آموزش رایگان جاوا اسکریپت</p>
</div>
</div>
<nav id="list">fatemeh</nav>
</body>
<script type="text/javascript" src="test.js"></script>
</html>

 

پس از آن برای div و img خود یک css مینویسیم.

 

#loading{
  margin: 0;
  top: 0;
  width: 100%;
  height: 200%;
  z-index: 10;
  position: fixed;
  background-color: rgb(0,0,0);
  right: 0;
  left: 0;
}

#loading img{
  width: 25%;
  height: 20%;
  margin-left: 35%;
  margin-top: 15%;
}

 

یک صفحه لودینگ بر روی تمام اجزای صفحه شما ایجاد می­شود که تا زمانی که صفحه به طور کامل load نشده، صفحه را نشان ندهد.

 

 

 

 

 

پس از آن کد زیر را به فایل .js خود اضافه کنید.

پس تا زمانی که صفحه کامل لود نشده، gif loading ظاهر میشود. ولی به محض اجرای تمام کد ها، کد js ما شروع به اجرا شدن میکند و gif loading حذف می­شود.

 

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

 

$( function(){

  $("#loading").hide();
  console.log("ready");

  for (var i = 0;document.getElementsByTagName("LI").length > i; i++) {
    document.getElementsByTagName("LI")[i].innerHTML = "fatemeh saberi";
  }

  var hide = 0;
  function my_function(){
    if (hide == 0){
      document.getElementById("list").style.visibility = "hidden";
      hide=1;
    }
    else {
      document.getElementById("list").style.visibility = "visible";
      hide=0;
    }
  }
});

 

برای دیدن آموزش های بیشتر جزوات jQuery را دنبال کنید.

قسمت قبل آموزش (آشنایی اولیه با jQuery)

قسمت بعد آموزش (آموزش events و selectors در jQuery)

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد.