स्पिनर

के साथ jQuery पूर्ण HTML पृष्ठ लोड मैं कुछ सरल करने की कोशिश कर रहा हूं - एक jQuery स्क्रिप्ट बनाएं जो पूरे डीआईवी, टेक्स्ट और छवियों सहित पूरे पृष्ठ को दिखाने के लिए प्रतीक्षा करेगी। जबकि पृष्ठ लोड हो रहा है, पृष्ठ के कुछ हिस्सों को दिखाने के बजाय मैं एक कताई जीआईएफ छवि दिखाना चाहता हूं, और जब पूरा पृष्ठ लोड होता है तो हम ब्राउज़र विंडो में पृष्ठ की सामग्री को फीका कर सकते हैं।स्पिनर

कंटेनर डीआईवी में AJAX अनुरोध के साथ लोड करने के लिए बहुत सारी स्क्रिप्ट हैं - लेकिन यह अलग है। एचटीएमएल पेज लोड होने पर यह एक कताई जीआईएफ दिखाएगा। किसी भी मदद

स्क्रिप्ट के इस प्रकार के ही काम करता है की सराहना की ajax अनुरोध

$('#loadingDiv') 
    .hide() // hide it initially 
    .ajaxStart(function() { 
     $(this).show(); 
    }) 
    .ajaxStop(function() { 
     $(this).hide(); 
    });

स्रोत

2012-05-24 user1317510

$(document).ready(...) जल्द ही डोम लोड होने पर आग लगती है। यह जल्द ही है। आप $(window).load(...) का उपयोग सकता था:

जावास्क्रिप्ट:

$(window).load(function(){ 
    $('#cover').fadeOut(1000); 
})

सीएसएस:

#cover { 
    background: url("to/your/ajaxloader.gif") no-repeat scroll center center #FFF; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
}

HTML:

<div id="cover"></div> 
<!-- rest of the page... -->

इस jsFiddle पर नज़र: http://jsfiddle.net/gK9wH/9/

स्रोत

2012-05-24 17:54:47 AvL

हां, दस्तावेज़ तैयार जल्द ही आग लग रहा है, और कुछ तत्व ब्राउज़र विंडो में प्रतिपादन के माध्यम से मध्य मार्ग हो सकते हैं और यह यह दिखाएगा ... तो हम पहले स्पिनर को कैसे दिखा सकते हैं, और फिर इसे छुपाएं - अगर हम प्रतीक्षा कर रहे हैं लोड करने के लिए खिड़की? – user1317510

संपादित करें ... या सीधे यहां देखें: http://jsfiddle.net/gK9wH/ – AvL

हाँ। मैं देखता हूँ कि काम करता है! लेकिन मुझे स्पिनर नहीं दिख रहा है। शायद स्पिनर JSFiddle विंडो स्क्रॉल द्वारा छुपाया गया है? – user1317510

पर मुझे लगता है कि सबसे अच्छा तरीका है एक 'कवर' करने के लिए किया जाएगा div जबकि लोड जो पूरे पेज को कवर किया जाएगा। यह अपारदर्शी होगा, और इसमें आपका जीआईएफ होगा।

निम्नलिखित तो div छिपाने एक बार पृष्ठ के लोड होते:

.div{ 
    height:100%; 
    width:100%; 
    overflow:hidden; 
}

स्रोत

2012-05-24 17:48:27

सबसे पहले आप हर चीज में मतलब है:

$(document).ready(function() { 
    // Hide the 'cover' div 
});

निम्नलिखित div पृष्ठ के आकार बनाना होगा शरीर टैग के बीच? कताई उपहार करने का सबसे अच्छा तरीका एक वर्ग को जोड़ना है जो जीआईएफ को परिभाषित करता है क्योंकि कोई भी दोहराना और केंद्रित नहीं होता है। पृष्ठ को हटाए जाने पर कक्षा को हटा दें।

$('body').addClass('loading') 
$('body').removeClass('loading')

यह हमेशा सबसे अच्छी तकनीक है, क्योंकि अगर आप कुछ प्रस्तुत फिर एक डोम अलावा कुछ ब्राउज़रों यह काम नहीं चलेगा क्योंकि पेज के माध्यम से प्रस्तुत किया गया है gif जोड़ने के लिए प्रयास करें।

स्रोत

2012-05-24 17:53:39 Elliott

तो, हम वास्तव में यह कैसे करेंगे? मेरा मतलब है ... हम कैसे जानते हैं कि सभी बाइट लोड हो जाते हैं और अब लोडिंग क्लास को हटाने और शरीर के मुख्य भाग में फीका होने का समय है? – user1317510

मैं पूरे पृष्ठ को ओवरले के साथ कवर करता हूं, और फिर पेज लोड होने के बाद ओवरले को हटा देता हूं। यदि आप चाहें तो लोडिंग.gif को दिखाने के लिए आप इसे ट्विक कर सकते हैं। यहाँ एक उदाहरण है:

एचटीएमएल

<body> 
<div id="container"> 
    <h2>Header</h2> 
    <p>Page content goes here.</p> 
    <br /> 
    <button id="remove_overlay">Remove Overlay</button> 
</div> 
</body>

सीएसएस

#container{padding:20px;} 

h2 {margin-bottom: 10px; font-size: 24px; font-weight: bold;} 

#overlay { 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 100%; 
     height:2305px !important; /*change to YOUR page height*/ 
     background-color: #000; 
     filter:alpha(opacity=50); 
     -moz-opacity:0.5; 
     -khtml-opacity: 0.5; 
     opacity: 0.5; 
     z-index: 998; 
} 
#remove_overlay{position:relative; z-index:1000;}

jQuery:

$(document).ready(function() { 

     // Set a variable that is set to the div containing the overlay (created on page load) 
     var page_overlay = jQuery('<div id="overlay"> </div>'); 

     // Function to Add the overlay to the page 
     function showOverlay(){ 
      page_overlay.appendTo(document.body); 
     } 
     // Function to Remove the overlay from the page 
     function hideOverlay(){ 
      page_overlay.remove(); 
     } 

     // Show the overlay. 
     $(showOverlay); 

     }); 
}); 

$(document).ready(function() { 
    $(hideOverlay); 
});

आप इस बदलाव करने इतना है कि यह रूप में जल्द ही ओवरले लोड करता है की आवश्यकता होगी पृष्ठ से अनुरोध किया गया है ($(showOverlay); कॉल को ट्विक करें ताकि दस्तावेज़ तैयार होने से पहले इसे आग लग जाए ।

ओवरले को हटाने के लिए बटन के साथ एक साधारण कामकाजी पहेली है। आपको वहां से जाने में सक्षम होना चाहिए :) http://jsfiddle.net/3quN5/

स्रोत

2012-05-24 19:00:19 adamdehaven

स्पिनर

उत्तर

संबंधित मुद्दे