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

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

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

$( document ).ready(function(){
  console.log("ready");
});

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

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

$( function(){
  console.log("ready");
});

حال میتوانید این کد را بر روی کل کد های خود بنویسید زیرا میخواهیم تا زمانی که صفحه کامل 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)

Post Views: 510