जेक्री विद एंड इफ्रेम और प्रोग्रेस इंडिकेटर

Question

का उपयोग करें मुझे पता है कि यह वहां मौजूद है, कहीं और मुझे इसे खोज के कुछ घंटों में नहीं मिला है। मुझे बस एक क्लाइंट बाहरी पृष्ठ को IFRAME में लोड करना होगा, लेकिन मैं बाहरी डेटा को पकड़ने के दौरान लोडिंग छवि को प्रस्तुत करने के लिए jquery ui का उपयोग करना चाहता हूं।

सरल हाँ, लेकिन मैंने इस चीज़ को पूरी चीज नहीं देखा है।

Answer 1

ऐसा कुछ?

लाइव उदाहरण:http://jsfiddle.net/CPadm/

संपादित करें: अपडेट किया गया ताकि iframe भरी हुई है जब तक छिपा हुआ है।

लाइव (अद्यतन) उदाहरण:http://jsfiddle.net/CPadm/3/

एचटीएमएल

<div id="button">Click to load</div> 

<iframe></iframe> 

<div id='loading'>Page is loading...</div>​ 

सीएसएस

iframe { 
    display: none; 
} 
#button { 
    background: blue; 
    color: white; 
    padding: 10px; 
    width: 100px; 
} 
#loading { 
    width: 300px; 
    padding: 20px; 
    background: orange; 
    color: white; 
    text-align: center; 
    margin: 0 auto; 
    display: none; 
}​ 

jQuery

$('iframe').load(function() { 
    $('#loading').hide(); 
    $('iframe').show(); 
}); 

$('#button').click(function() { 
    $('#loading').show(); 
    $('iframe').attr("src", "http://www.apple.com/"); 
});​ 

---

प्रासंगिक jQuery डॉक्स:

• .load() - http://api.jquery.com/load-event/
• .hide()-http://api.jquery.com/hide/
• .show()-http://api.jquery.com/show/
• .attr() - http://api.jquery.com/attr/