इतिहास एपीआई: ब्राउज़र को कैसे बताना है कि पृष्ठ लोड हो रहा है?

Question

मैं इतिहास एपीआई के साथ काम कर रहा हूं जबकि मैं जावास्क्रिप्ट/jquery के माध्यम से पृष्ठों को असंकालिक रूप से लोड कर रहा हूं। मैं सोच रहा हूं कि ब्राउजर को यह बताना संभव है कि साइट लोड हो रही है, ताकि ब्राउज़र लोडिंग पिक्चर दिखा सके (जैसे फ़ायरफ़ॉक्स में कताई चक्र)।

संपादित करें:

अधिक विशिष्ट होना करने के लिए:

तो मैं अपनी वेबसाइट, यूआरएल परिवर्तन, पर एक पृष्ठ लोड नई सामग्री दिखाया गया है, लेकिन फ़ायरफ़ॉक्स एक संकेत के रूप में चरखा नहीं दिखा , कि पृष्ठ लोड हो रहा है।

अगर मैं फेसबुक में टाइमलाइन से एक तस्वीर खोलता हूं, तो छवि लोड हो रही है, यूआरएल परिवर्तन और फ़ायरफ़ॉक्स कताई चक्र दिखाता है कि छवि पृष्ठभूमि में लोड हो रही है।

मुझे वह कताई चक्र भी चाहिए!

Answer 1

ठीक है, async अनुरोध जानता है कि कुछ लोड किया जा रहा है। आपको बस कहीं और घटना का प्रचार करना होगा। उदाहरण के लिए, beforeSend हुक का उपयोग कर:

$.ajax('/your_stuff', 
     beforeSend: function() { 
     $(document).trigger('loading'); 
     } 
     ....) 

और उसके बाद:

$(document).on('loading', function() { alert("request is loading");} 

मैं एक ही समय आप इतिहास API के साथ अपने URL को अपडेट पर ईवेंट ट्रिगर करने के लिए सलाह होगा।

Answer 2

मुझे लगता है कि आप अपने AJAX के लिए jQuery का उपयोग कर रहे टैग से मानते हैं। आप $.ajaxStart() और $.ajaxComplete() इन की तरह वैश्विक AJAX के संचालकों का उपयोग कर सकते की परवाह किए बिना सक्रिय कर देगा जहां आप अपने कोड के भीतर एक ajax विधि कॉल

$('#myLoadingDiv').ajaxStart(toggleLoading).ajaxComplete(toggleLoading); 

function toggleLoading(){ 
    $(this).toggle(); 
} 

API संदर्भ http://api.jquery.com/ajaxStart/

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

संपादित आप इस कोड के लिए id=myLoadingDiv साथ एक तत्व में अपने खुद के लोड हो रहा है एनीमेशन प्रदान करनी चाहिए

Answer 3

मैं इन सवाल में जवाब मिल गया काम करने के लिए है:

How to have AJAX trigger the browser's loading

var i = $('<iframe>'); 
console.log(i); 
i.appendTo('body'); 
function start() { 
    i[0].contentDocument.open(); 
    setTimeout(function() { 
     stop(); 
    }, 1000); 
} 
function stop() { 
    i[0].contentDocument.close(); 
    setTimeout(function() { 
     start(); 
    }, 1000); 
} 

start(); 

स्रोत: jsFiddle

स्क्रिप्ट एक आईफ्रेम बनाता है, जो AJAX.start & ajax.stop-event द्वारा ट्रिगर किया जाता है।