Warning: Declaration of Bootstrap_Walker::start_lvl(&$output, $depth) should be compatible with Walker_Nav_Menu::start_lvl(&$output, $depth = 0, $args = NULL) in /home/itport/public_html/wp-content/themes/itport-v5.0/functions/bootstrap-walker.php on line 25

Warning: Declaration of Bootstrap_Walker::end_lvl(&$output, $depth) should be compatible with Walker_Nav_Menu::end_lvl(&$output, $depth = 0, $args = NULL) in /home/itport/public_html/wp-content/themes/itport-v5.0/functions/bootstrap-walker.php on line 42

Warning: Declaration of Bootstrap_Walker::start_el(&$output, $item, $depth, $args) should be compatible with Walker_Nav_Menu::start_el(&$output, $data_object, $depth = 0, $args = NULL, $current_object_id = 0) in /home/itport/public_html/wp-content/themes/itport-v5.0/functions/bootstrap-walker.php on line 57

Warning: Declaration of Bootstrap_Walker::end_el(&$output, $item, $depth, $args) should be compatible with Walker_Nav_Menu::end_el(&$output, $data_object, $depth = 0, $args = NULL) in /home/itport/public_html/wp-content/themes/itport-v5.0/functions/bootstrap-walker.php on line 108
آی تی پورت | آموزش ساخت صفحه بارگذاری وب سایت
Warning: Use of undefined constant url - assumed 'url' (this will throw an Error in a future version of PHP) in /home/itport/public_html/wp-content/themes/itport-v5.0/header.php on line 56

Warning: Use of undefined constant title - assumed 'title' (this will throw an Error in a future version of PHP) in /home/itport/public_html/wp-content/themes/itport-v5.0/header.php on line 57
طراحی وب

آموزش ساخت صفحه بارگذاری وب سایت

اگر در طراحی وب سایت خود از المان های خاصی استفاده کرده اید که بارگذاری آنها کمی طول می کشد و یا وب سایت شما دارای محتوا سنگین مانند تصاویر با حجم بالا و … می باشد یکی از راه کارهای که جلوگیری کند از عدم رضایت مخاطب به دلیل کندی بارگزاری وب سایت استفاده از صفحات در حال بارگزاری (loading page) است. در ادامه برای شما همراهان آی تی پورت آموزش ساخت یک صفحه بارگذاری به همراه کد بررسی بارگذاری آماده کرده ایم. همچنین در پایان مطلب برای شما دوستان نمونه های بیشتر قرار گرفته است.

ظاهر این صفحه برگرفته شده از توزیع سیستم عامل لینوکس به نام لوبونتو lubuntu هست که سعی شده کاملا شبیه به صفحه بارگذاری این سیستم عامل زیبا باشد.

محتوای فایل html

<!DOCTYPE html>

<html>

<head>

<title>Lubuntu</title>

<style>

html{height:100%}

body{margin:0;height:100%}

</style>

<link rel="stylesheet" type="text/css" media="screen" href="lubuntu.css" />

<body class="load_body" id="load_body">

<div id="load_bg">

	<div id="load_center">Lubuntu

	<div id="load_dots">

		<span id="load_dot1" class="load_activedot">.</span>

		<span id="load_dot2">.</span>

		<span id="load_dot3">.</span>

		<span id="load_dot4">.</span>

		<span id="load_dot5">.</span>

	</div>

	</div>

</div>

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="lubuntu.js"></script>



<img src="http://itbs.ir/png/logo">

</body>

</html>

 

محتوای فایل css

@import url(https://fonts.googleapis.com/css?family=Ubuntu);

#load_bg{width:100%;height:100%;background-color:rgb(0,22,43);position:fixed;top:0}

.load_body{overflow:hidden;}

#load_center {

   width: 200px;

   height: 100px;

   position: absolute;

   left: 50%;

   top: 50%; 

   margin-left: -100px;

   color:#fff;

   margin-top: -50px;

  font-family: 'Ubuntu';

  font-size:50px;

  text-shadow: 0px 0px 9px rgb(0,104,200);

  text-align:center

}

#load_dots{width: 200px;font-size:40px;color:#fff;text-shadow: 0px 0px 9px rgb(0,104,200);position: absolute;line-height:20px;letter-spacing: 2px;text-align:center}

#load_activedot{color:rgb(16,105,226)}

 

محتوای فایل جی کوئری

function load_js(id) { 

 switch(id) {

     case 1:

    $('#load_dot1').css('color', 'rgb(16,105,226)');

     setTimeout('load_js(2) ', 300);

         break;

     case 2:

    $('#load_dot2').css('color', 'rgb(16,105,226)');

     setTimeout('load_js(3) ', 300);

         break;

     case 3:

    $('#load_dot3').css('color', 'rgb(16,105,226)');

     setTimeout('load_js(4) ', 300);

         break;

     case 4:

    $('#load_dot4').css('color', 'rgb(16,105,226)');

     setTimeout('load_js(5) ', 300);

         break;

     case 5:

    $('#load_dot5').css('color', 'rgb(16,105,226)');

     setTimeout('load_js(6) ', 300);

         break;

     case 6:

    $('#load_dot1').css('color', 'rgb(255,255,255)');

     setTimeout('load_js(7) ', 300);

         break;

     case 7:

    $('#load_dot2').css('color', 'rgb(255,255,255)');

     setTimeout('load_js(8) ', 300);

         break;

     case 8:

    $('#load_dot3').css('color', 'rgb(255,255,255)');

     setTimeout('load_js(9) ', 300);

         break;

     case 9:

    $('#load_dot4').css('color', 'rgb(255,255,255)');

     setTimeout('load_js(10) ', 300);

         break;

     case 10:

    $('#load_dot5').css('color', 'rgb(255,255,255)');

     setTimeout('load_js(1) ', 300);

         break;

 }

}load_js(1) ;

window.onload = function () { $("#load_bg").hide();$(".load_body").removeClass("load_body");}

 

نمونه صفحه بارگذاری وب سایت

 

صفحه بارگذاری

[aio_button align=”center” animation=”flash” color=”green” size=”small” icon=”none” text=”دانلود فایل کد” target=”_blank” relationship=”dofollow” url=”http://www.itport.ir/wp-content/uploads/2017/04/CSS3-Loading-Animation-Loop.zip”]

 

صفحه بارگذاری

[aio_button align=”center” animation=”flash” color=”green” size=”small” icon=”none” text=”دانلود فایل کد” target=”_blank” relationship=”dofollow” url=”http://www.itport.ir/wp-content/uploads/2017/04/Page-Loading-Effects.zip”]

و در پایان اگر سوال ، پیشنهاد و انتقادی بود از طریق دیدگاه ارسال کنید.

گفتگو ها

    ممنونم بابت آموزش های خوب تون تو بخش طراحی وب
    لطفا این بخش رو ادامه بدید
    سپاسگزارم

    ممنون از اطلاعات مفیدتون