मैं ऐसी साइट पर काम कर रहा हूं जिसमें एमपी 3 और छवियों का पूरा समूह शामिल है, और मैं सभी सामग्री लोड होने पर लोडिंग gif प्रदर्शित करना चाहता हूं।साइट सामग्री लोड होने पर लोडिंग स्क्रीन को प्रदर्शित करने के लिए कैसे करें
मुझे नहीं पता कि इसे कैसे प्राप्त किया जाए, लेकिन मेरे पास एनिमेटेड gif है जिसका उपयोग मैं करना चाहता हूं।
कोई सुझाव?
आमतौर पर साइटों कि ajax के माध्यम से सामग्री लोड और readystatechanged घटना को सुन एक लोडिंग GIF या सामग्री के साथ डोम अद्यतन करने के लिए कर ऐसा करते हैं।
वर्तमान में आप अपनी सामग्री कैसे लोड कर रहे हैं?
कोड इस के समान होगा:
function load(url) {
// display loading image here...
document.getElementById('loadingImg').visible = true;
// request your data...
var req = new XMLHttpRequest();
req.open("POST", url, true);
req.onreadystatechange = function() {
if (req.readyState == 4 && req.status == 200) {
// content is loaded...hide the gif and display the content...
if (req.responseText) {
document.getElementById('content').innerHTML = req.responseText;
document.getElementById('loadingImg').visible = false;
}
}
};
request.send(vars);
}
3 पार्टी के बहुत सारे जावास्क्रिप्ट लाइब्रेरियों अपने जीवन को आसान बना सकती हैं, लेकिन इसके बाद के संस्करण वास्तव में आप सभी की जरूरत है।
आपने कहा कि आप AJAX में ऐसा नहीं करना चाहते थे। जबकि AJAX इस के लिए बहुत अच्छा है, लोड करने के लिए पूरे <body> की प्रतीक्षा करते समय एक डीआईवी दिखाने का एक तरीका है। यह कुछ इस तरह चला जाता है:
<html>
<head>
<style media="screen" type="text/css">
.layer1_class { position: absolute; z-index: 1; top: 100px; left: 0px; visibility: visible; }
.layer2_class { position: absolute; z-index: 2; top: 10px; left: 10px; visibility: hidden }
</style>
<script>
function downLoad(){
if (document.all){
document.all["layer1"].style.visibility="hidden";
document.all["layer2"].style.visibility="visible";
} else if (document.getElementById){
node = document.getElementById("layer1").style.visibility='hidden';
node = document.getElementById("layer2").style.visibility='visible';
}
}
</script>
</head>
<body onload="downLoad()">
<div id="layer1" class="layer1_class">
<table width="100%">
<tr>
<td align="center"><strong><em>Please wait while this page is loading...</em></strong></p></td>
</tr>
</table>
</div>
<div id="layer2" class="layer2_class">
<script type="text/javascript">
alert('Just holding things up here. While you are reading this, the body of the page is not loading and the onload event is being delayed');
</script>
Final content.
</div>
</body>
</html>
ऑनलोड ईवेंट सक्रिय नहीं होंगे जब तक पेज के सभी लोड होना। तो लेयर 2 <DIV> तब तक प्रदर्शित नहीं होगा जब तक कि पृष्ठ लोडिंग समाप्त नहीं हो जाता है, जिसके बाद अधिभार आग लग जाएगी।
वास्तव में ऐसा करने का एक आसान तरीका है।
<script type="test/javascript">
function showcontent(x){
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 1) {
document.getElementById('content').innerHTML = "<img src='loading.gif' />";
}
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('content').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('POST', x+'.html', true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send(null);
}
और HTML में: कोड कुछ की तरह होना चाहिए
<body onload="showcontent(main)"> <!-- onload optional -->
<div id="content"><img src="loading.gif"></div> <!-- leave img out if not onload -->
</body>
मैं अपने पन्ने पर ऐसा ही कुछ किया है और यह बहुत अच्छा काम करता है।
आप HTML5 में <progress> तत्व का उपयोग कर सकते हैं। स्रोत कोड और लाइव डेमो के लिए यह पृष्ठ देखें। http://purpledesign.in/blog/super-cool-loading-bar-html5/
यहां प्रगति तत्व है ...
<progress id="progressbar" value="20" max="100"></progress>
इस लोड हो रहा है मान 20 बेशक केवल तत्व अभ्यस्त पर्याप्त से शुरू होगा। आपको स्क्रिप्ट लोड के रूप में इसे स्थानांतरित करने की आवश्यकता है। इसके लिए हमें JQuery की आवश्यकता है। यहां एक सरल JQuery स्क्रिप्ट है जो प्रगति को 0 से 100 तक शुरू करती है और परिभाषित समय स्लॉट में कुछ करता है।
<script>
$(document).ready(function() {
if(!Modernizr.meter){
alert('Sorry your brower does not support HTML5 progress bar');
} else {
var progressbar = $('#progressbar'),
max = progressbar.attr('max'),
time = (1000/max)*10,
value = progressbar.val();
var loading = function() {
value += 1;
addValue = progressbar.val(value);
$('.progress-value').html(value + '%');
if (value == max) {
clearInterval(animate);
//Do Something
}
if (value == 16) {
//Do something
}
if (value == 38) {
//Do something
}
if (value == 55) {
//Do something
}
if (value == 72) {
//Do something
}
if (value == 1) {
//Do something
}
if (value == 86) {
//Do something
}
};
var animate = setInterval(function() {
loading();
}, time);
};
});
</script>
इसे अपनी HTML फ़ाइल में जोड़ें।
<div class="demo-wrapper html5-progress-bar">
<div class="progress-bar-wrapper">
<progress id="progressbar" value="0" max="100"></progress>
<span class="progress-value">0%</span>
</div>
</div>
आशा है कि यह आपको एक शुरुआत देगा।
jQuery के साथ कैसे? एक साधारण ...
$(window).load(function() { //Do the code in the {}s when the window has loaded
$("#loader").fadeOut("fast"); //Fade out the #loader div
});
और एचटीएमएल ...
<div id="loader"></div>
और सीएसएस ...
#loader {
width: 100%;
height: 100%;
background-color: white;
margin: 0;
}
div आप GIF और किसी भी पाठ आप चाहते थे रखा, और इसे बाहर फीका करना होगा एक बार पृष्ठ के लोड होते में
तो।
सबसे पहले, एक div में लोडिंग छवि सेट अप करें। अगला, div तत्व प्राप्त करें। फिर, एक ऐसा फ़ंक्शन सेट करें जो सीएसएस को "छुपा" दृश्यता बनाने के लिए संपादित करता है। अब, <body> में, फ़ंक्शन नाम पर ऑनलोड डालें।
#Pure सीएसएस विधि
अपने कोड के शीर्ष पर जगह इस (हेडर टैग से पहले)
<style> .loader {
position: fixed;
background-color: #FFF;
opacity: 1;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 10;
}
</style><div class="loader">
Your Content For Load Screen
</div>और यह पर अन्य सभी कोड के बाद नीचे (exc ept/HTML टैग)
<style>
.loader {
-webkit-animation: load-out 1s;
animation: load-out 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes load-out {
from {
top: 0;
opacity: 1;
}
to {
top: 100%;
opacity: 0;
}
}
@keyframes load-out {
from {
top: 0;
opacity: 1;
}
to {
top: 100%;
opacity: 0;
}
}
</style>यह हमेशा मेरे लिए काम करता है समय की 100%
आप कृपया मुझे क्या 3 पार्टी पुस्तकालयों बता सकते हैं ? – Shekhar
@ शेखर [jQuery] (http://jquery.com/) एक व्यापक रूप से उपयोग की जाने वाली जावास्क्रिप्ट लाइब्रेरी है। – Stian