स्वचालित रूप से 5 सेकंड के लिए लोडिंग gif प्रदर्शित करना

जब उपयोगकर्ता वेबसाइट पर जाता है तो मैं लोडिंग gif स्वचालित रूप से प्रदर्शित करना चाहता हूं और फिर 5 सेकंड के बाद यह चला जाता है।स्वचालित रूप से 5 सेकंड के लिए लोडिंग gif प्रदर्शित करना

मुझे यह स्क्रिप्ट मिली जो मैं चाहता हूं, लेकिन यह स्वचालित रूप से ऐसा नहीं करती है। प्रयोक्ता को इस उद्देश्य को हराने के लिए बटन पर क्लिक करने की आवश्यकता है।

<input type = "button" value = "Show image for 5 seconds" onclick = "show()"><br><br> 
<div id = "myDiv" style="display:none"><img id = "myImage" src = "images/ajax-loader.gif"></div><br> 

<script type = "text/javascript"> 

function show() { 
    document.getElementById("myDiv").style.display="block"; 
    setTimeout("hide()", 5000); // 5 seconds 
} 

function hide() { 
    document.getElementById("myDiv").style.display="none"; 
} 

</script>

आप इसे here देख सकते हैं।

यदि कोई ऐसा तरीका है जिसमें मैं ऐसा कर सकता हूं, या यदि ऐसा करने का एक बेहतर तरीका है तो कृपया टिप्पणी करें।

स्रोत

2011-12-23 connor.p

[टैग: जावास्क्रिप्ट] *** *** [टैग: जावा] नहीं है। –

क्षमा करें, पता नहीं था, मैं अभी भी –

बस onclick="show()" हटाएं, और अपने जावास्क्रिप्ट ब्लॉक की अंतिम पंक्ति के रूप में show(); जोड़ें।

इसके अलावा, जैसा कि मैंने global namespace pollution के प्रति संवेदनशील हूँ, मैं इसे इस तरह करना चाहते हैं:

<script type="text/javascript"> 

    (function(){ 
    var myDiv = document.getElementById("myDiv"), 

     show = function(){ 
     myDiv.style.display = "block"; 
     setTimeout(hide, 5000); // 5 seconds 
     }, 

     hide = function(){ 
     myDiv.style.display = "none"; 
     }; 

    show(); 
    })(); 

</script>

स्रोत

2011-12-23 16:51:57 ziesemer

पर नया हूं याद रखें कि अगर वह पृष्ठ के शीर्ष में इसे लोड कर रहा है तो उसके divs dom में मौजूद नहीं हैं। पेज लोड पर इसे करने के लिए सबसे अच्छा प्रो। –

आपको बहुत धन्यवाद, यह बहुत अच्छा काम करता है –

@ डोमिनिकग्रीन - सहमत है, लेकिन यह दिखाए गए नमूने के साथ काम करेगा। अन्यथा, मैं पूरी चीज़ को 'jQuery.ready()' से कुछ कहूंगा। – ziesemer

आप window.onload की कोशिश की?

की तर्ज पर

कुछ:

<body onload="show();"> 
..snip 
</body>

स्रोत

2011-12-23 16:53:21

अब मैंने नहीं किया है, मैंने कभी इसके बारे में नहीं सुना है शायद यह –

अपनी स्क्रिप्ट के अंत तक window.onload = show; जोड़ें और यह जैसे ही पेज लोड हो जाए, लोडर दिखाएगा। जब आप पृष्ठ खोलते हैं तो आप इस घटना का उपयोग किसी भी चीज के लिए करना चाहते हैं, क्योंकि यह सुनिश्चित करता है कि पृष्ठ पर तत्वों में हेरफेर करने का प्रयास करने से पहले पूरा पृष्ठ उपलब्ध है।

स्रोत

2011-12-23 16:53:55 Hal

आप मेरेडिव से display: none; को हटा सकते हैं। इस तरह से यह शुरुआत से दिखाई देगा, और फिर आप इसे पांच सेकंड के बाद छुपाएंगे।

सीएसएस के साथ इसे पहले छिपाने की कोई आवश्यकता नहीं है, और उसके बाद इसे जावास्क्रिप्ट के साथ प्रदर्शित करें, जब आप इसे शुरुआत से दिखाना चाहते हैं।

<input type = "button" value = "Show image for 5 seconds" onclick = "show()"><br><br> 
<div id = "myDiv"><img id = "myImage" src = "images/ajax-loader.gif"></div><br> 

<script type = "text/javascript"> 
setTimeout(function(){ 
    document.getElementById("myDiv").style.display="none"; 
}, 5000); 
</script>

स्रोत

2011-12-23 16:54:13

में देखने लायक होगा यदि उपयोगकर्ता के पास जावास्क्रिप्ट अक्षम है? फिर आप उन्हें एक लोडिंग एनीमेशन दिखाएंगे, और फिर स्क्रिप्ट इसे कभी नहीं हटाएगी। – Hal

@harrison_m मान्य बिंदु, +1! –

के बाद <body>

<div id="myDiv"><img id="myImage" src="images/ajax-loader.gif"></div> 
<script> 
    setTimeout('document.getElementById("myDiv").style.display="none"', 5000); // 5 seconds 
</script>

स्रोत

2011-12-23 16:55:14

छवि के style="display:none" तो छवि डिफ़ॉल्ट रूप से प्रतीत होता है कि से छुटकारा यह अधिकार रखो। अन्य लोग आपको show() पर कॉल करने के लिए कह रहे हैं, लेकिन यह पूरी तरह अनावश्यक है। आरंभ में छवि को दिखाने के लिए आपको जावास्क्रिप्ट का उपयोग करने की आवश्यकता नहीं है; बस इसे अपने आप प्रदर्शित करने दें। फिर, 5 सेकंड बीतने के बाद इसे हटा दें:

<div id = "myDiv"><img id = "myImage" src = "images/ajax-loader.gif"></div><br> 

<script type = "text/javascript"> 
    setTimeout(function() { 
     document.getElementById("myDiv").style.display="none"; 
    }, 5000); // 5 seconds 
</script>

स्रोत

2011-12-23 16:59:40

स्वचालित रूप से 5 सेकंड के लिए लोडिंग gif प्रदर्शित करना

उत्तर

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