복붙노트

[JQUERY] 페이지 로딩이 완료 될 때까지 어떻게 페이지로드 DIV를 보여?

JQUERY

페이지 로딩이 완료 될 때까지 어떻게 페이지로드 DIV를 보여?

해결법

  1. 1.나는이 필요했고 몇 가지 조사 후 나는 (jQuery를 필요)이 함께했다 :

    나는이 필요했고 몇 가지 조사 후 나는 (jQuery를 필요)이 함께했다 :

    첫 번째는 바로 태그 다음에이 추가 :

    <div id="loading">
  <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</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;
}

    그런 다음, (변론 과정의 태그, 전에, 바람직 페이지의 끝에서) 페이지에이 자바 스크립트를 추가 :

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

    마지막으로, 로딩 이미지의 위치와 스타일 클래스 로딩 사업부의 배경 색상을 조정합니다.

    이것은, 잘 작동해야합니다. 그러나 물론 당신은 아약스 - loader.gif의 어딘가에 있어야합니다. 여기 공짜. (마우스 오른쪽 버튼으로 클릭> 이미지 저장으로 ...)

  2. 2.이 스크립트는 페이지가로드로 전체 창을 포함 사업부를 추가합니다. 그것은 자동으로 CSS 전용 로딩 스피너를 표시합니다. 창 (없는 문서)로드가 완료 때까지, 대기 다음은 옵션 추가로 몇 초를 기다립니다.

    이 스크립트는 페이지가로드로 전체 창을 포함 사업부를 추가합니다. 그것은 자동으로 CSS 전용 로딩 스피너를 표시합니다. 창 (없는 문서)로드가 완료 때까지, 대기 다음은 옵션 추가로 몇 초를 기다립니다.

    jQuery를 3와 함께 작동합니다 (새 창로드 이벤트가 있습니다) 이미지가 필요하지 않습니다하지만 그것은 하나를 쉽게 추가 할 수 있습니다 더 브랜드 또는 지침 지연을 변경 만 의존성이 jQuery를합니다.

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

    $ ( '몸') APPEND ( '

    로드 중 ... .'); $ (창) CSTE 연구진 ( '로드', 기능 () { 에서는 setTimeout (removeLoader, 2000); // 페이지로드 PLUS 2 초 동안 기다립니다. }); removeLoader 함수 () { () {( "#loadingDiv") .fadeOut (500, 기능을 $ // 페이드 아웃이 완료되었습니다. 로딩 DIV 제거 $ ( "#loadingDiv") .remove (); // 페이지가 더 가볍고하게 }); } .짐을 싣는 사람, .loader : 후 { 경계 반경 : 50 %; 폭 : 10em; 높이 : 10em; } .loader { 여백 : 60 픽셀 자동; 폰트 사이즈 : 10px; 위치 : 상대; 텍스트 들여 쓰기 : -9999em; 경계 위쪽 : 1.1em 고체 RGBA (255, 255, 255, 0.2); 오른쪽 경계 : 1.1em 고체 RGBA (255, 255, 255, 0.2); 보더 하단 : 1.1em 고체 RGBA (255, 255, 255, 0.2); 국경 왼쪽 : 1.1em 고체 #FFFFFF; -webkit-변환 : translateZ (0); -ms-변환 : translateZ (0); 변환 : translateZ (0); -webkit 애니메이션 : 1.1s load8 무한 선형; 애니메이션 : 1.1s load8 무한 선형; } @ -webkit-키 프레임 load8 { {0 % -webkit-변환 : 회전 (0deg)를; 변환 : 회전 (0deg)를; } 100 % { -webkit-변환 : 회전 (360deg)를; 변환 : 회전 (360deg)를; } } @keyframes load8 { {0 % -webkit-변환 : 회전 (0deg)를; 변환 : 회전 (0deg)를; } 100 % { -webkit-변환 : 회전 (360deg)를; 변환 : 회전 (360deg)를; } } #loadingDiv { 위치 : 절대; 최고 : 0; 왼쪽 : 0; 폭 : 100 %; 신장 : 100 %; 배경 색상 : # 000; } 이 스크립트는 페이지가로드로 전체 창을 포함 사업부를 추가합니다. 그것은 자동으로 CSS 전용 로딩 스피너를 표시합니다. 창 (없는 문서)로드가 완료 때까지 기다립니다.
    • 새 창로드 이벤트를 가지고 jQuery를 3과 작품
    • 는 이미지가 필요하지 않습니다하지만 그것은 하나의 로 쉽게 추가 할 수 있습니다
    • 변경 브랜딩 또는 지침에 대한 지연 <리> 전용 종속성 jQuery에있다. 신체의 하단에 아래의 스크립트를 놓습니다. https://projects.lukehaas.me/css-loaders에서 CSS 로더 코드 <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

    • 3.창로드 = 함수 () {document.getElementById를 ( "로드"). style.display를 = "없음"} #loading {폭 : 100 % 신장 100 %, 위 : 고정, 디스플레이 : 위치;; 0 픽셀을 0 픽셀 왼쪽 블록; Z- 색인 : 99} # 로딩 이미지 {총수 : 절대; 상위 40 % 남은 45 % Z- 색인 100}

      창로드 = 함수 () {document.getElementById를 ( "로드"). style.display를 = "없음"} #loading {폭 : 100 % 신장 100 %, 위 : 고정, 디스플레이 : 위치;; 0 픽셀을 0 픽셀 왼쪽 블록; Z- 색인 : 99} # 로딩 이미지 {총수 : 절대; 상위 40 % 남은 45 % Z- 색인 100}

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

    • 4.나는 완벽하게 나를 위해 일한있는이에 대한 간단한 솔루션 아래에 다른있다.

      나는 완벽하게 나를 위해 일한있는이에 대한 간단한 솔루션 아래에 다른있다.

      우선, 아래 그림과 같이 로딩 GIF와 함께 투명 오버레이 인 이름 로크 온 클래스와 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 id="coverScreen"  class="LockOn">
</div>

      이제 우리는 페이지가 우리가 클릭에서 사용자를 제한 할 수 있도록 준비 될 때마다이 커버 화면을 숨길 필요가 / 어떤 이벤트를 트리거하면 페이지가 준비 될 때까지

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

      페이지가 로딩 될 때마다 위 솔루션은 잘 될 것입니다.

      페이지가로드 된 후 우리는 시간이 오래 걸릴 것입니다 버튼이나 이벤트를 클릭 할 때마다 이제 문제는, 우리는 아래와 같이 클라이언트 클릭 이벤트에이를 표시해야한다

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

      우리는 결과를 제공하고 페이지를 한 번 실행됩니다로드 기능에 대한 창 위의 준비가되어있는 덮개 화면을 숨길 수는 GIF와의 커버 화면을 표시합니다 (보고서를 제공하는 데 시간이 오래 걸릴 것)이 인쇄 버튼을 클릭합니다 의미 일단 화면이 완전히로드됩니다.

    • 5.화면에 내용을 기본 : 없음 다음 세트는 표시 할 것을 이벤트 핸들러가 : 블록 또는 유사한을 완전히 장전 후를. 그런 다음 디스플레이로 설정되어 사업부가 : 거기에 "로드"로 블록을, 그리고 그것을 표시하도록 설정 : 없음을 이전과 동일한 이벤트 핸들러.

      화면에 내용을 기본 : 없음 다음 세트는 표시 할 것을 이벤트 핸들러가 : 블록 또는 유사한을 완전히 장전 후를. 그런 다음 디스플레이로 설정되어 사업부가 : 거기에 "로드"로 블록을, 그리고 그것을 표시하도록 설정 : 없음을 이전과 동일한 이벤트 핸들러.

    • 6.음,이 크게 내 최초의 생각은 당신이 아약스를 통해 그 하중을하고있는 것입니다 어떻게있는 거 넣기 '집중적 인 전화'에 필요한 요소에 따라 달라집니다. 그런 경우에는, 당신은 'beforeSend'옵션을 사용하여이 같은 아약스 전화를 걸 수 :

      음,이 크게 내 최초의 생각은 당신이 아약스를 통해 그 하중을하고있는 것입니다 어떻게있는 거 넣기 '집중적 인 전화'에 필요한 요소에 따라 달라집니다. 그런 경우에는, 당신은 '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를에서 .ready $ (문서) (...)과 함께 위의 옵션이다. $ (문서) 전체 문서 구조 .ready () 함수가 대기 실행하기 전에로드되는 (그러나 부하에 모든 미디어 기다리지 않습니다). 당신이 뭔가를 할 것입니다 :

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

    • 7.내 블로그는 100 % 작동합니다.

      내 블로그는 100 % 작동합니다.

      showLoader 함수 () { $ ( ". 로더") fadeIn ( "천천히."); } hideLoader 함수 () { $ ( ". 로더") 페이드 아웃 ( "천천히."); } .loader { 위치 : 고정; 왼쪽 : 0 픽셀; 최고 : 0 픽셀; 폭 : 100 %; 신장 : 100 %; Z- 색인 : 9999; 배경 : 홈페이지 ( 'pageLoader2.gif') 50 % 50 % 노 반복 RGB (249,249,249); 불투명 : 0.8; }

    • 8.의
      당신의 로딩 메시지를 포함하는
      요소를 작성
      ID를 제공하고 콘텐츠가 완성 된 하중이있는 경우 다음 숨기기 :

      의

      당신의 로딩 메시지를 포함하는
      요소를 작성
      ID를 제공하고 콘텐츠가 완성 된 하중이있는 경우 다음 숨기기 :

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

      ... 또는 일반 자바 스크립트 :

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

    • 9.다음은 각 아약스 호출에 추가 할 필요가 없습니다 있도록 jQuery를 내가하는 모니터, 모든 아약스 시작 / 중지를 사용하여 종료입니다 :

      다음은 각 아약스 호출에 추가 할 필요가 없습니다 있도록 jQuery를 내가하는 모니터, 모든 아약스 시작 / 중지를 사용하여 종료입니다 :

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

      적재 용기 및 (주로 mehyaa의 대답에서) 내용뿐만 아니라 숨기기 클래스에 대한 CSS :

      #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>

    • 10.@mehyaa 응답,하지만 훨씬 짧은 바탕으로 :

      @mehyaa 응답,하지만 훨씬 짧은 바탕으로 :

      HTML (오른쪽 후 ) :

      <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();
  });

    • 11.이 API 호출에 동기화 될 것이다, API 호출이 발생하면, 로더가 표시됩니다. API 호출이 성공적인 경우, 로더가 제거됩니다. 이것은 두 페이지로드 또는 API 호출시 사용할 수 있습니다.

      이 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); }
}

    • 12.테마에 드루팔에 대한 custom_theme.theme 파일

      테마에 드루팔에 대한 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;
 }

    from https://stackoverflow.com/questions/1853662/how-to-show-page-loading-div-until-the-page-has-finished-loading by cc-by-sa and MIT license

    'JQUERY' 카테고리의 다른 글

    [JQUERY] 어떻게 동시에 두 개의 jQuery를 애니메이션을 실행하는?  (0) 2020.10.19
    [JQUERY] 어떻게 jQuery를 기능 (새로운 jQuery를 방법 또는 플러그인)을 만드는 방법?  (0) 2020.10.19
    [JQUERY] 어떻게 .CSS () 함수와 추가 된 스타일을 제거 할 수 있습니까?  (0) 2020.10.19
    [JQUERY] html로 테이블에 실시간 검색과 필터를 수행하는 방법  (0) 2020.10.18
    [JQUERY] 라디오 버튼이 JQuery와 함께 확인 여부를 알아?  (0) 2020.10.18
    ,

티스토리툴바