पृष्ठ लोड करने के लिए पृष्ठ लोड होने तक div कैसे दिखाएँ?

148

हमारी वेबसाइट पर मेरा एक सेक्शन है जो बहुत धीरे-धीरे लोड होता है क्योंकि यह कुछ गहन कॉल कर रहा है।

कोई भी विचार कि मैं कैसे div"लोडिंग" के समान कुछ कहने के लिए दिखा सकता हूं जबकि पृष्ठ खुद तैयार करता है और फिर सब कुछ तैयार होने पर गायब हो जाता है?

javascript  jquery  html  dom  loader 
— Shadi Almosri
स्रोत

जवाबों:

215

मुझे इसकी आवश्यकता है और कुछ शोध के बाद मैं इसके साथ आया ( jQuery की आवश्यकता):

सबसे पहले, <body>टैग जोड़ने के ठीक बाद :

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

फिर अपने सीएसएस में div और छवि के लिए शैली वर्ग जोड़ें:

#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 = function () {$ ('# लोडिंग')। show (); }
— समीह डेब्स
2
+1 यह छोटा, मीठा और स्पष्ट है, मुझे यह पसंद है। हालाँकि मैं उस div को हटा दूंगा और केवल <img> (;
— फ्रांसिस्को प्रेसेनिया
3
लोडिंग इमेज लोड करने में थोड़ा समय लग रहा है, तब तक पेज पहले ही लोड हो चुका है
— Elyor
1
$('#loading').hide();प्रत्येक पृष्ठ लोड पर जोड़ने से बचने के लिए मेरा उत्तर देखें ।
— rybo111
यह अजाक्स कोड प्रभावी और तेजी से काम करेगा: smallenvelop.com/display-loading-icon-page-loads-completely
— JWC May
36

यह स्क्रिप्ट एक div जोड़ेगी जो पेज लोड होते ही पूरी विंडो को कवर करती है। यह स्वतः ही एक सीएसएस-केवल लोडिंग स्पिनर दिखाएगा। यह खिड़की तक इंतजार करेगा (दस्तावेज़ नहीं) लोडिंग को पूरा करता है, फिर यह एक वैकल्पिक अतिरिक्त कुछ सेकंड इंतजार करेगा।

  • 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>
स्निपेट का विस्तार करें

— विक्टर स्टोडर्ड
स्रोत
कल्पना टैग के लिए इसे कैसे जोड़ें?
— मनो एम
1
@ManoM $(window).on("load", handler)आग लग जाती है जब सभी DOM ऑब्जेक्ट लोड हो रहे हैं, जिसमें चित्र, स्क्रिप्ट, यहां तक ​​कि iframes भी शामिल हैं। यदि आप एक विशिष्ट छवि को लोड करने के लिए इंतजार करना चाहते हैं, तो उपयोग करें$('#imageId').on("load", handler)
— विक्टर स्टोडर्ड
मेरे लिए यह केवल तभी काम कर रहा है जब पृष्ठ पहले लोड होता है, अर्थात जब ब्राउज़र / टैब खोला जाता है या ताज़ा किया जाता है। हालाँकि, यह नहीं दिखाया गया है कि पेज को खोलने के बाद लोड हो रहा है। मेरे पास एक पृष्ठ है जिसमें टॉगल अलग-अलग सामग्री दिखाते हैं और जब सामग्री के बीच टॉगल होता है तो लोड होने में कुछ समय लगता है। क्या कोई ऐसा तरीका है जिसमें मैं इस कोड को लोड करने के लिए अनुकूलित कर सकता हूं न केवल पृष्ठ को पहली बार खोला गया है, बल्कि हर बार लोड करने में कुछ समय लग रहा है?
— जोहाट
1
@ जोहाट के $( "#loadingDiv" ).remove();साथ $( "#loadingDiv" ).hide();और $( "#loadingDiv" ).show();पहले जोड़ें setTimeout(removeLoader, 2000);। पृष्ठ को और अधिक हल्का बनाने के लिए मुझे हटा दिया गया था, लेकिन यह फिक्स इसे पुन: प्रयोज्य बनाता है।
— विक्टर स्टोडर्ड
मैंने आपके कोड की कोशिश की .. यह अजीब है। जब मैं अपने पृष्ठ को कॉल करता हूं तो यह एक रिक्त पृष्ठ दिखाता है (यह सामग्री लोड कर रहा है)। कुछ सेकंड के बाद (मुझे लगता है कि सामग्री भरी हुई है) यह लोडर को 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>
स्निपेट का विस्तार करें

जेएस में निर्मित सरलतम फीकाआउट प्रभाव वाली पृष्ठ लोडिंग छवि :

— डेरियस जे
स्रोत
9

मेरे पास इसके लिए एक और सरल समाधान है जो मेरे लिए पूरी तरह से काम करता है।

सबसे पहले, एक सीएसएस बनाएं जिसका नाम लॉकऑन क्लास है जो नीचे दिखाए गए अनुसार 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();
});

इसका मतलब है कि जब हम इस प्रिंट बटन पर क्लिक करते हैं (जो रिपोर्ट देने में लंबा समय लेगा) तो यह हमारी कवर स्क्रीन को जीआईएफ के साथ दिखाएगा जो यहपरिणाम देता है और पेज लोड होने पर विंडो के ऊपर तैयार होने से आग लग जाएगी और जो कवर स्क्रीन को छिपा देगा एक बार स्क्रीन पूरी तरह से भरी हुई है।

— रिनॉय अशोकन
स्रोत
1
महान! केवल इसे पूर्ण स्क्रीन स्थिति बनाने के लिए इनका उपयोग करना था: निश्चित; चौड़ाई: 100vw; ऊंचाई: 100vh;
— बोटेंग
6

सामग्री को डिफ़ॉल्ट करें display:noneऔर फिर एक इवेंट हैंडलर है जो display:blockइसे पूरी तरह लोड होने के बाद या इसके समान सेट करता है । फिर एक div है जो display:blockइसमें "लोड हो रहा है" के साथ सेट है , और इसे display:noneपहले की तरह उसी हैंडलर में सेट करें ।

— अंबर
स्रोत
1
आप यह करने के लिए किस घटना का उपयोग करेंगे? जावास्क्रिप्ट पृष्ठ लोड? या कोई बेहतर जगह है?
— मील्स
इस बात पर निर्भर करता है कि आपके पास पृष्ठ के लिए अन्य जेएस सेटअप सामान है या नहीं - यदि ऐसा है, तो इसे करने के बाद कॉल करें, यदि नहीं, तो दस्तावेज़ ऑनलोड ठीक काम करता है।
— एम्बर
2

खैर, यह काफी हद तक इस बात पर निर्भर करता है कि आप 'गहन कॉल' में आवश्यक तत्वों को कैसे लोड कर रहे हैं, मेरा प्रारंभिक विचार यह है कि आप उन भारों को अजाक्स के माध्यम से कर रहे हैं। अगर ऐसा है, तो आप 'पहले वाले' विकल्प का उपयोग कर सकते हैं और इस तरह से एक ऐजैक्स कॉल कर सकते हैं:

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

EDIT मैं देख रहा हूं, उस स्थिति में, jQuery 'display:block'/'display:none'के साथ संयोजन के रूप में ऊपर दिए गए विकल्पों में से एक का उपयोग $(document).ready(...)करना संभवतः जाने का तरीका है। $(document).ready()पूरे दस्तावेज संरचना के लिए समारोह प्रतीक्षा करता है निष्पादित करने से पहले लोड करने के लिए किया जा ( लेकिन यह लोड करने के लिए सभी मीडिया के लिए प्रतीक्षा नहीं करता है )। आप ऐसा कुछ करेंगे:

$(document).ready( function() {
  $('table#with_slow_data').show();
  $('div#loading image or text').hide();
});
— btelles
स्रोत
दुर्भाग्य से यह अजाक्स के माध्यम से नहीं है, यह डेटाबेस से डेटा तैयार करने के लिए php स्क्रिप्ट की प्रतीक्षा कर रहा है, इसलिए कुछ html तत्व लोड किए गए हैं फिर ब्राउज़र बाकी लोड करने से पहले डेटा तालिका का इंतजार करता है। जो यह देख सकता है कि पृष्ठ रुक गया है, इसलिए वहां कुछ प्रदर्शित करने की आवश्यकता है, ताकि "कुछ हो रहा है" और उपयोगकर्ता को दूर जाने का कारण न बने ...
— Shadi Almosri
FYI करें: वेब का सिद्धांत (ajax के बिना) यह है कि एक सर्वर पूरे पृष्ठ सर्वराइड का प्रतिपादन करता है और पूरा होने पर यह परिणाम (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">
स्निपेट का विस्तार करें

— जितेंद्र पटेल
स्रोत
1

एक ऐसा <div>तत्व बनाएं जिसमें आपका लोडिंग संदेश हो, <div>एक आईडी दें, और फिर जब आपकी सामग्री लोड करना समाप्त कर ले, तो छिपाएं <div>:

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

... या सादे जावास्क्रिप्ट में:

document.getElementById("myElement").style.display = "none";
— स्टीव हैरिसन
स्रोत
सरल और काम हो जाता है। एक पठनीयता के नजरिए से $("#myElement").hide()आंखों के लिए आसान नहीं है?
— user3613932
1

यहाँ jQuery का उपयोग करके मैं समाप्त हो गया, जो सभी ajax start / stop की निगरानी करता है, इसलिए आपको इसे प्रत्येक ajax सेवा में जोड़ने की आवश्यकता नहीं है:

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

लोड हो रहे कंटेनर और सामग्री के लिए सीएसएस (ज्यादातर 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
स्रोत
समस्या यह है, अगर मेरे पास इनपुट में एक अजाक्स लोड स्वतः पूर्ण है, तो लोडर दिखाई देगा।
— लुकास
0

@Mehyaa उत्तर के आधार पर, लेकिन बहुत कम:

HTML (इसके ठीक बाद <body>):

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

सीएसएस:

#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

यह एक एपीआई कॉल के साथ सिंक्रनाइज़ेशन में होगा, जब एपी कॉल ट्रिगर होता है, तो लोडर दिखाया जाता है। जब एपी कॉल सक्सेसफुल होता है, तो लोडर को हटा दिया जाता है। इसका उपयोग पृष्ठ लोड के लिए या एपीआई कॉल के दौरान किया जा सकता है।

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

सीएसएस

.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 %}

सीएसएस फ़ाइल में

#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;
 }
— प्रदीप
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.