จะแสดงหน้าการโหลด div จนกว่าหน้าจะโหลดเสร็จแล้วได้อย่างไร

148

ฉันมีส่วนหนึ่งในเว็บไซต์ของเราที่โหลดค่อนข้างช้าเนื่องจากมีการโทรจำนวนมาก

ความคิดใดที่ฉันสามารถdivบอกสิ่งที่คล้ายกับ "กำลังโหลด" เพื่อแสดงในขณะที่หน้าเตรียมตัวเองแล้วหายไปเมื่อทุกอย่างพร้อม?

215

ฉันต้องการสิ่งนี้และหลังจากการวิจัยบางอย่างฉันมาด้วยสิ่งนี้ ( จำเป็นต้องjQuery ):

ก่อนอื่นหลังจาก<body>ติดป้ายเพิ่มแล้ว:

<div id="loading">
  <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>

จากนั้นเพิ่มคลาสสไตล์สำหรับ div และรูปภาพใน 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: 100px;
  left: 240px;
  z-index: 100;
}

จากนั้นเพิ่มจาวาสคริปต์นี้ในหน้าของคุณ (โดยเฉพาะอย่างยิ่งในตอนท้ายของหน้าของคุณก่อนที่</body>แท็กปิดของคุณ):

<script>
  $(window).load(function() {
    $('#loading').hide();
  });
</script>

ในที่สุดปรับตำแหน่งของภาพการโหลดและbackground-colourdiv ของการโหลดด้วยคลาสสไตล์

นี่มันควรจะทำงานได้ดี แต่แน่นอนคุณต้องมีajax-loader.gifที่ไหนสักแห่ง freebies ที่นี่ (คลิกขวา> บันทึกภาพเป็น ... )

— mehyaa
แหล่งที่มา

5

เมื่อเปลี่ยนเส้นทางไปยังหน้าอื่นหน้าดังกล่าวจะเก็บไว้ในหน้าเดียวกันและแสดงหน้าเว็บที่ต้องการทันทีจากนั้น: แสดงบานหน้าต่างการโหลดในหน้าก่อนหน้าก่อนโหลดและหน้าเป้าหมาย window.onbeforeunload = function () {$ ('# loading'). show (); }

— Sameh Deabes

2

+1 นี่สั้นหวานและชัดเจนฉันชอบมาก อย่างไรก็ตามฉันจะลบ div ออกและปล่อยเฉพาะ <img> (;

— Francisco Presencia

3

มันใช้เวลาสักครู่ในการโหลดภาพจนกว่าจะโหลดหน้าได้แล้ว

— Elyor

1

ดูคำตอบของฉันเพื่อหลีกเลี่ยงการเพิ่ม$('#loading').hide();ในการโหลดแต่ละหน้า

— rybo111

รหัส Ajax นี้จะทำงานได้อย่างมีประสิทธิภาพและรวดเร็ว: smallenvelop.com/display-loading-icon-page-loads-completely

— JWC

36

สคริปต์นี้จะเพิ่ม div ที่ครอบคลุมทั้งหน้าต่างเมื่อโหลดหน้าเว็บ มันจะแสดงเพียงแค่โหลดสปินเนอร์ CSS เท่านั้นโดยอัตโนมัติ มันจะรอจนกว่าหน้าต่าง (ไม่ใช่เอกสาร) โหลดเสร็จแล้วมันจะรออีกไม่กี่วินาทีพิเศษ

ทำงานร่วมกับ jQuery 3 (มีเหตุการณ์โหลดหน้าต่างใหม่)
ไม่ต้องการรูปภาพ แต่เพิ่มได้ง่าย
เปลี่ยนความล่าช้าในการสร้างแบรนด์หรือคำแนะนำเพิ่มเติม
การพึ่งพาเท่านั้นคือ jQuery

โค้ดตัวโหลด CSS จากhttps://projects.lukehaas.me/css-loaders

    
$('body').append('<div style="" id="loadingDiv"><div class="loader">Loading...</div></div>');
$(window).on('load', function(){
  setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
});
function removeLoader(){
    $( "#loadingDiv" ).fadeOut(500, function() {
      // fadeOut complete. Remove the loading div
      $( "#loadingDiv" ).remove(); //makes page more lightweight 
  });  
}

        .loader,
        .loader:after {
            border-radius: 50%;
            width: 10em;
            height: 10em;
        }
        .loader {            
            margin: 60px auto;
            font-size: 10px;
            position: relative;
            text-indent: -9999em;
            border-top: 1.1em solid rgba(255, 255, 255, 0.2);
            border-right: 1.1em solid rgba(255, 255, 255, 0.2);
            border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
            border-left: 1.1em solid #ffffff;
            -webkit-transform: translateZ(0);
            -ms-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-animation: load8 1.1s infinite linear;
            animation: load8 1.1s infinite linear;
        }
        @-webkit-keyframes load8 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @keyframes load8 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        #loadingDiv {
            position:absolute;;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background-color:#000;
        }

This script will add a div that covers the entire window as the page loads. It will show a CSS-only loading spinner automatically. It will wait until the window (not the document) finishes loading.

  <ul>
    <li>Works with jQuery 3, which has a new window load event</li>
    <li>No image needed but it's easy to add one</li>
    <li>Change the delay for branding or instructions</li>
    <li>Only dependency is jQuery.</li>
  </ul>

Place the script below at the bottom of the body.

CSS loader code from https://projects.lukehaas.me/css-loaders

<!-- Place the script below at the bottom of the body -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

ขยายตัวอย่างข้อมูล

— วิกเตอร์สต็อดดาร์ด
แหล่งที่มา

จะเพิ่มส่วนนี้สำหรับแท็ก imag ได้อย่างไร

— Mano M

1

@ManoM $(window).on("load", handler)ยิงเมื่อวัตถุ DOM ทั้งหมดโหลดเสร็จรวมถึงรูปภาพสคริปต์หรือแม้แต่ iframes หากคุณต้องการรอให้โหลดภาพที่เฉพาะเจาะจงใช้$('#imageId').on("load", handler)

— Victor Stoddard

สิ่งนี้สำหรับฉันจะทำงานเฉพาะเมื่อเพจโหลดครั้งแรกนั่นคือเมื่อเบราว์เซอร์ / แท็บเปิดหรือรีเฟรช อย่างไรก็ตามจะไม่ปรากฏขึ้นเมื่อมีการโหลดหน้าเว็บหลังจากที่เปิดขึ้นมาแล้ว ฉันมีเพจที่สลับการแสดงเนื้อหาต่าง ๆ และเมื่อสลับระหว่างเนื้อหาจะใช้เวลาสักครู่ในการโหลด มีวิธีที่ฉันสามารถปรับรหัสเดียวกันนี้เพื่อโหลดไม่เพียงครั้งแรกที่เปิดหน้าเว็บ แต่ทุกครั้งที่ใช้เวลาโหลดสักครู่?

— Joehat

1

@Joehat แทนที่$( "#loadingDiv" ).remove();ด้วย$( "#loadingDiv" ).hide();และเพิ่มก่อน$( "#loadingDiv" ).show(); setTimeout(removeLoader, 2000);ฉันได้ลบ div ออกเพื่อทำให้หน้าเว็บมีน้ำหนักเบาขึ้น แต่การแก้ไขนี้ทำให้สามารถใช้ซ้ำได้

— Victor Stoddard

ฉันลองใช้รหัสของคุณ .. มันแปลก เมื่อฉันเรียกหน้าของฉันมันจะแสดงหน้าว่าง (กำลังโหลดเนื้อหา) หลังจากนั้นไม่กี่วินาที (ฉันคิดว่าเนื้อหาถูกโหลด) มันจะแสดงตัวโหลดเป็นเวลา 2 วินาทีกว่าที่มันจะแสดงแบบเต็มหน้า คุณสามารถดู: criferrara.it/crigest/toshiba

— แสงแดด

28

window.onload = function(){ document.getElementById("loading").style.display = "none" }

#loading {width: 100%;height: 100%;top: 0px;left: 0px;position: fixed;display: block; z-index: 99}

#loading-image {position: absolute;top: 40%;left: 45%;z-index: 100}

<div id="loading">
<img id="loading-image" src="img/loading.gif" alt="Loading..." />
</div>

ขยายตัวอย่างข้อมูล

รูปภาพการโหลดหน้าเว็บที่มีเอฟเฟกต์fadeout ที่ง่ายที่สุดที่สร้างใน JS

— Dariusz J
แหล่งที่มา

9

ฉันมีวิธีแก้ไขปัญหาง่ายๆด้านล่างนี้สำหรับการทำงานที่สมบูรณ์แบบสำหรับฉัน

ก่อนอื่นให้สร้าง CSS ที่มีชื่อคลาสLockonซึ่งเป็นโอเวอร์เลย์แบบโปร่งใสพร้อมกับโหลด GIF ดังที่แสดงด้านล่าง

.LockOn {
    display: block;
    visibility: visible;
    position: absolute;
    z-index: 999;
    top: 0px;
    left: 0px;
    width: 105%;
    height: 105%;
    background-color:white;
    vertical-align:bottom;
    padding-top: 20%; 
    filter: alpha(opacity=75); 
    opacity: 0.75; 
    font-size:large;
    color:blue;
    font-style:italic;
    font-weight:400;
    background-image: url("../Common/loadingGIF.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

ตอนนี้เราจำเป็นต้องสร้าง div ของเราด้วยคลาสนี้ซึ่งครอบคลุมทั้งหน้าเป็นการวางซ้อนเมื่อใดก็ตามที่หน้าโหลด

<div id="coverScreen"  class="LockOn">
</div>

ตอนนี้เราต้องซ่อนหน้าจอปกนี้เมื่อใดก็ตามที่หน้าพร้อมและเพื่อให้เราสามารถ จำกัด ผู้ใช้จากการคลิก / ยิงเหตุการณ์ใด ๆ จนกว่าหน้าจะพร้อม

$(window).on('load', function () {
$("#coverScreen").hide();
});

วิธีแก้ปัญหาข้างต้นจะใช้ได้เมื่อใดก็ตามที่มีการโหลดหน้าเว็บ

ตอนนี้คำถามคือหลังจากโหลดหน้าเว็บแล้วเมื่อใดก็ตามที่เราคลิกปุ่มหรือเหตุการณ์ที่ใช้เวลานานเราจำเป็นต้องแสดงสิ่งนี้ในเหตุการณ์การคลิกของลูกค้าดังแสดงด้านล่าง

$("#ucNoteGrid_grdViewNotes_ctl01_btnPrint").click(function () {
$("#coverScreen").show();
});

ซึ่งหมายความว่าเมื่อเราคลิกปุ่มพิมพ์นี้ (ซึ่งจะใช้เวลานานในการรายงาน) มันจะแสดงหน้าจอปกของเราด้วย GIF ซึ่งให้ผลลัพธ์และเมื่อหน้าพร้อมหน้าต่างด้านบนเมื่อฟังก์ชั่นโหลดจะเริ่มทำงานและที่ซ่อนหน้าจอปก เมื่อหน้าจอเต็มแล้ว

— Rinoy Ashokan
แหล่งที่มา

1

ที่ดี! ต้องใช้สิ่งเหล่านี้เพื่อทำให้เต็มหน้าจอตำแหน่ง: แก้ไข; ความกว้าง: 100vw; ความสูง: 100vh;

— boateng

6

เริ่มต้นเนื้อหาไปที่display:noneแล้วมีตัวจัดการเหตุการณ์ที่กำหนดเป็นdisplay:blockหรือคล้ายกันหลังจากที่โหลดเต็ม จากนั้นให้ div ที่ถูกตั้งค่าเป็นdisplay:block"กำลังโหลด" อยู่ในนั้นและตั้งค่าdisplay:noneเป็นตัวจัดการเหตุการณ์เดียวกับเมื่อก่อน

— สีเหลืองอำพัน
แหล่งที่มา

1

เหตุการณ์ใดที่คุณจะใช้ในการทำเช่นนี้? โหลดหน้า Javascript หรือไม่ หรือมีสถานที่ที่ดีกว่า

— ไมล์

ขึ้นอยู่กับว่าคุณมี JS ตัวอื่นที่กำลังทำการเซ็ตอัพเพจหรือไม่ถ้าเป็นเช่นนั้นให้เรียกมันหลังจากที่ทำเสร็จแล้วถ้าไม่ใช่แล้วเอกสาร onload ทำงานได้ดี

— เหลืองอำพัน

2

ส่วนใหญ่นี้ขึ้นอยู่กับว่าคุณกำลังโหลดองค์ประกอบที่จำเป็นใน 'การโทรอย่างเข้มข้น' ความคิดเริ่มต้นของฉันคือการที่คุณโหลดสิ่งเหล่านี้ผ่านทางอาแจ็กซ์ หากเป็นเช่นนั้นคุณสามารถใช้ตัวเลือก 'beforeSend' และทำการโทร ajax ดังนี้:

$.ajax({
  type: 'GET',
  url: "some.php",
  data: "name=John&location=Boston",

  beforeSend: function(xhr){           <---- use this option here
     $('.select_element_you_want_to_load_into').html('Loading...');
  },

  success: function(msg){
     $('.select_element_you_want_to_load_into').html(msg);
  }
});

แก้ไข ฉันเห็นว่าในกรณีนั้นใช้หนึ่งใน'display:block'/'display:none'ตัวเลือกข้างต้นร่วมกับ$(document).ready(...)จาก jQuery น่าจะเป็นวิธีที่จะไป $(document).ready()รอฟังก์ชั่นสำหรับโครงสร้างเอกสารทั้งหมดที่จะโหลดก่อนที่จะดำเนิน ( แต่ก็ไม่ได้รอให้ทุกสื่อโหลด ) คุณต้องการทำสิ่งนี้:

$(document).ready( function() {
  $('table#with_slow_data').show();
  $('div#loading image or text').hide();
});

— btelles
แหล่งที่มา

โชคไม่ดีที่มันไม่ผ่านอาแจ็กซ์, มันกำลังรอสคริปต์ php เพื่อเตรียมข้อมูลจากฐานข้อมูล, ดังนั้นจึงมีการโหลดองค์ประกอบ HTML บางส่วนจากนั้นเบราว์เซอร์จะรอตารางของข้อมูลก่อนที่จะโหลดส่วนที่เหลือ ซึ่งอาจดูราวกับว่าหน้าเว็บหยุดทำงานไปแล้วดังนั้นจึงจำเป็นต้องมีสิ่งที่แสดงอยู่เพื่อแสดงให้เห็นว่า "มีบางอย่างกำลังเกิดขึ้น" และไม่ทำให้ผู้ใช้ออกไป ...

— Shadi Almosri

FYI: หลักการของเว็บ (โดยไม่มีอาแจ็กซ์) คือเซิร์ฟเวอร์แสดงผลหน้าเซิร์ฟเวอร์ทั้งหมดและเมื่อเสร็จสิ้นจะส่งผลลัพธ์นี้ (html) ไปยังเบราว์เซอร์ หากการเรนเดอร์หน้าหยุดตรงกลาง (ในขณะที่คุณสามารถเห็นเพจที่ปรากฏในเบราว์เซอร์) มันไม่สามารถเป็นสคริปต์ php ได้เนื่องจาก php ทำงานเฉพาะเซิร์ฟเวอร์

— ปีเตอร์

ดูคำตอบของฉันเพื่อหลีกเลี่ยงการเพิ่มbeforeSendและsuccessการโทร ajax แต่ละครั้ง

— rybo111

2

บล็อกของฉันจะใช้งานได้ 100 เปอร์เซ็นต์

function showLoader()
{
    $(".loader").fadeIn("slow");
}
function hideLoader()
{
    $(".loader").fadeOut("slow");
}

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('pageLoader2.gif') 50% 50% no-repeat rgb(249,249,249);
    opacity: .8;
}

<div class="loader">

ขยายตัวอย่างข้อมูล

— Jitendra Patel
แหล่งที่มา

1

สร้าง<div>องค์ประกอบที่มีข้อความการโหลดของคุณกำหนด<div>ID จากนั้นเมื่อเนื้อหาของคุณโหลดเสร็จแล้วให้ซ่อน<div>:

$("#myElement").css("display", "none");

... หรือใน JavaScript ธรรมดา:

document.getElementById("myElement").style.display = "none";

— สตีฟแฮร์ริสัน
แหล่งที่มา

เรียบง่ายและทำงานให้เสร็จลุล่วง จากมุมมองการอ่านไม่$("#myElement").hide()ง่ายในสายตา?

— user3613932

1

นี่คือ jQuery ที่ฉันใช้ซึ่งจะตรวจสอบ ajax ทั้งหมดเริ่ม / หยุดดังนั้นคุณไม่จำเป็นต้องเพิ่มมันลงในการโทร ajax แต่ละครั้ง:

$(document).ajaxStart(function(){
    $("#loading").removeClass('hide');
}).ajaxStop(function(){
    $("#loading").addClass('hide');
});

CSS สำหรับการโหลดคอนเทนเนอร์ & เนื้อหา (ส่วนใหญ่มาจากคำตอบของ mehyaa) เช่นเดียวกับhideคลาส:

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

#loading-content {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  z-index: 100;
}

.hide{
  display: none;
}

HTML:

<div id="loading" class="hide">
  <div id="loading-content">
    Loading...
  </div>
</div>

— rybo111
แหล่งที่มา

ปัญหาคือถ้าฉันมีการเติมข้อความอัตโนมัติ Ajax ในอินพุตตัวโหลดจะปรากฏขึ้น

— ลูคัส

0

ตามคำตอบ @mehyaa แต่สั้นกว่ามาก:

HTML (ทันทีหลังจาก<body>):

<img id = "loading" src = "loading.gif" alt = "Loading indicator">

CSS:

#loading {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  /* 1/2 of the height and width of the actual gif */
  margin: -16px 0 0 -16px;
  z-index: 100;
  }

Javascript (jQuery เนื่องจากฉันใช้อยู่แล้ว):

$(window).load(function() {
  $('#loading').remove();
  });

— Francisco Presencia
แหล่งที่มา

1

มันเป็นการดีกว่าhide()องค์ประกอบมากกว่าremove()มันเพื่อให้คุณสามารถใช้งานได้อีกครั้ง

— rybo111

0

นี่จะเป็นการซิงโครไนซ์กับการเรียก api, เมื่อการเรียก api ถูกทริกเกอร์, โหลดเดอร์จะปรากฏขึ้น เมื่อการเรียก api สำเร็จแล้วตัวโหลดจะถูกลบออก สิ่งนี้สามารถใช้สำหรับการโหลดหน้าหรือระหว่างการเรียก API

  $.ajax({
    type: 'GET',
    url: url,
    async: true,
    dataType: 'json',
    beforeSend: function (xhr) {
      $( "<div class='loader' id='searching-loader'></div>").appendTo("#table-playlist-section");
      $("html, body").animate( { scrollTop: $(document).height() }, 100);
    },
    success: function (jsonOptions) {
      $('#searching-loader').remove();
      .
      .
    }
  });

CSS

.loader {
  border: 2px solid #f3f3f3;
  border-radius: 50%;
  border-top: 2px solid #3498db;
  width: 30px;
  height: 30px;
  margin: auto;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
  margin-top: 35px;
  margin-bottom: -35px;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

— SuperEye
แหล่งที่มา

0

สำหรับ drupal ในไฟล์ custom_theme.theme ธีมของคุณ

function custom_theme_preprocess_html(&$variables) {
$variables['preloader'] = 1;
}

ในไฟล์ html.html.twig หลังจากข้ามลิงค์เนื้อหาหลักในเนื้อหา

{% if preloader %} 
  <div id="test-preloader" >
    <div id="preloader-inner" class="cssload-container">
      <div class="wait-text">{{ 'Please wait...'|t }} </div> 
      <div class="cssload-item cssload-moon"></div>
    </div>
  </div>
{% endif %}

ในไฟล์ css

#test-preloader {
position: fixed;
background: white;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
}
.cssload-container .wait-text {
text-align: center;
padding-bottom: 15px;
color: #000;
}

.cssload-container .cssload-item {
 margin: auto;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 width: 131px;
 height: 131px;
 background-color: #fff;
 box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
 -o-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
 -ms-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
 -webkit-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
 -moz-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
 }

.cssload-container .cssload-moon {
border-bottom: 26px solid #008AFA;
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
animation: spin 1.45s ease infinite;
-o-animation: spin 1.45s ease infinite;
-ms-animation: spin 1.45s ease infinite;
-webkit-animation: spin 1.45s ease infinite;
-moz-animation: spin 1.45s ease infinite;
 }

— Pradeep
แหล่งที่มา