페이지 로딩이 완료 될 때까지 페이지 로딩 div를 표시하는 방법은 무엇입니까?

148

웹 사이트에 집중적 인 호출을하는 동안 상당히 느리게로드되는 섹션이 있습니다.

div페이지가 준비되는 동안 표시하고 모든 준비가되면 사라지는 "로드 중"과 비슷한 말을 할 수있는 아이디어 가 있습니까?

javascript  jquery  html  dom  loader 
— 샤디 알 모시
소스

답변:

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-colour스타일 클래스 를 사용하여 로딩 이미지의 위치와 로딩 div 의 위치를 ​​조정하십시오 .

이것이 잘 작동합니다. 그러나 물론 ajax-loader.gif어딘가에 있어야합니다 . 여기 공짜 . (오른쪽 클릭> 다른 이름으로 이미지 저장 ...)

— mehyaa
소스
5
다른 페이지로 리디렉션하면 동일한 페이지에 유지되고 원하는 페이지가 갑자기 표시됩니다. 언로드 이전 페이지와 대상 페이지에로드 창을 표시합니다. window.onbeforeunload = 함수 () {$ ( '# 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 5 월
36

이 스크립트는 페이지가로드 될 때 전체 창을 덮는 div를 추가합니다. CSS 전용 로딩 스피너가 자동으로 표시됩니다. 윈도우 (문서가 아님)의 로딩이 완료 될 때까지 기다린 다음 옵션으로 몇 초 더 기다립니다.

  • jQuery 3과 함께 작동합니다 (새로운 창로드 이벤트가 있습니다)
  • 이미지가 필요하지 않지만 쉽게 추가 할 수 있습니다
  • 더 많은 브랜딩 또는 지침에 대한 지연 변경
  • 의존성은 jQuery입니다.

https://projects.lukehaas.me/css-loaders의 CSS 로더 코드

    
$('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)은 이미지, 스크립트, iframe을 포함한 모든 DOM 객체의 로딩이 완료되면 시작됩니다. 특정 이미지가로드되기를 기다리려면$('#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
— sunlight76
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>
스 니펫 확장

JS에서 만들어진 가장 간단한 페이드 아웃 효과를 가진 이미지 로딩 이미지 :

— 다리우스 J
소스
9

나는 나를 위해 완벽하게 효과가있는 또 다른 간단한 해결책을 가지고 있습니다.

먼저 아래 표시된 것처럼 GIF를로드하면서 투명 오버레이 인 Lockon 클래스 라는 이름의 CSS를 만듭니다.

.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로 표시되어 이결과가 표시되고 페이지가로드 된 상태에서 창 위에 페이지가 준비되면 표지 화면이 숨겨집니다. 화면이 완전히로드되면

— 리노이 ​​아 쇼칸
소스
1
큰! 이것을 사용하여 전체 화면 위치로 만들어야했습니다. 폭 : 100vw; 높이 : 100vh;
— boateng
6

내용의 기본값 display:none을 설정 한 다음 display:block완전히로드 된 후에 설정 하거나 이와 유사한 이벤트 처리기를 갖 습니다. 그런 다음 display:block"로드 중"으로 설정된 div가 있고 display:none이전과 동일한 이벤트 핸들러에서 설정하십시오 .

— 호박색
소스
1
이를 위해 어떤 이벤트를 사용 하시겠습니까? 자바 스크립트 페이지로드? 아니면 더 좋은 곳이 있습니까?
— Miles
페이지에 대한 설정 작업을 수행하는 다른 JS가 있는지 여부에 따라 다릅니다. 그렇다면 페이지를로드 한 다음 호출하면 문서 onload가 정상적으로 작동합니다.
— Amber
2

글쎄, 이것은 주로 '집중적 인 호출'에 필요한 요소를로드하는 방법에 달려 있으며, 초기 생각은 아약스를 통해로드를 수행한다는 것입니다. 이 경우 'beforeSend'옵션을 사용하여 다음과 같이 아약스 호출을 할 수 있습니다.

$.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);
  }
});

편집 이 경우 jQuery 'display:block'/'display:none'와 함께 위 의 옵션 중 하나를 사용 $(document).ready(...)하는 것이 좋습니다. 이 $(document).ready()함수는 실행하기 전에 전체 문서 구조가로드되기를 기다립니다 ( 그러나 모든 미디어가로드 될 때까지 기다리지는 않습니다 ). 당신은 이런 식으로 할 것입니다 :

$(document).ready( function() {
  $('table#with_slow_data').show();
  $('div#loading image or text').hide();
});
— 말다툼
소스
불행히도 그것은 아약스를 통하지 않고 php 스크립트가 데이터베이스에서 데이터를 준비하기를 기다리고 있으므로 일부 html 요소가로드 된 다음 브라우저는 나머지를로드하기 전에 데이터 테이블을 기다립니다. 마치 페이지가 멈춘 것처럼 보일 수 있으므로 "뭔가 일어나고 있음"을 보여주고 사용자가 떠나지 않도록하기 위해 뭔가 표시되어야합니다.
— Shadi Almosri
참고 : 웹의 원칙 (아약스 제외)은 서버가 전체 페이지 서버를 렌더링하고 완료되면이 결과 (html)를 브라우저로 보냅니다. 페이지 렌더링이 가운데 어딘가에 중단되면 (브라우저에 페이지가 표시되는 동안) PHP는 서버 측만 실행하기 때문에 PHP 스크립트 일 수 없습니다.
— Peter
추가 피하기 위해 내 대답을 참조 beforeSend하고 success각 아약스 호출에 있습니다.
— 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">
스 니펫 확장

— 지텐 드라 파텔
소스
1

<div>로드 메시지가 포함 된 요소를 <div>만들고 ID를 제공 한 다음 컨텐츠로드가 완료되면 다음을 숨 깁니다 <div>.

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

... 또는 일반 JavaScript로 :

document.getElementById("myElement").style.display = "none";
— 스티브 해리슨
소스
간단하고 작업을 완료합니다. 가독성 관점 $("#myElement").hide()에서 눈이 쉽지 않습니까?
— user3613932
1

다음은 모든 아약스 시작 / 중지를 모니터링하는 jQuery입니다. 따라서 각 아약스 호출에 추가 할 필요가 없습니다.

$(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가 자동 완성을로드하면 로더가 나타납니다.
— Lucas
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;
  }

자바 스크립트 (jQuery, 이미 사용하고 있기 때문에) :

$(window).load(function() {
  $('#loading').remove();
  });
— 프란시스코 프레 센시아
소스
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); }
}
— 슈퍼 아이
소스
0

테마 custom_theme.theme 파일에서 drupal

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;
 }
— 프라 딥
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.