जावास्क्रिप्ट / jquery में प्रतीक्षा करने के लिए कर्सर बदलना

Question

किसी फ़ंक्शन को कॉल करने पर मैं अपने कर्सर को इस लोडिंग आइकन में कैसे बदल सकता हूं और मैं जावास्क्रिप्ट / jquery में इसे सामान्य कर्सर में कैसे बदलूंगा

Comments

यदि आप वास्तव में इस कर्सर को चाहते हैं, तो आपको एक यूआरएल निर्दिष्ट करने की आवश्यकता है, अन्यथा (रॉबर्ट्स समाधान के साथ) प्रत्येक उपयोगकर्ता अपने ओएस के आधार पर लोडिंग कर्सर को देखेगा।

— क्रिस्टोफ

क्रिस्टोफ, क्या होगा 'प्रतीक्षा' अन्य ऑपरेटिंग सिस्टम मैं विंडोज 7 पर वर्तमान में कर रहा हूँ, क्योंकि इस समय यह ठीक लग रहा है के लिए शो

— Ahmet

ठीक है, विस्टा में यह विंडोज 7 के समान ही कर्सर दिखाएगा, लेकिन इसके टूटे हुए एनीमेशन के साथ, पुराने विंडोज ओएस पर यह अच्छे ol 'घंटे के चश्मे और लिनक्स या मैक ओएस पर दिखाएगा, यह उनके संबंधित "प्रतीक्षा" कर्सर को दिखाएगा। इसके अलावा, मैं उपयोगकर्ताओं के कर्सर में हेरफेर नहीं करने का सुझाव दूंगा, क्योंकि यह आमतौर पर ओएस-ऑपरेशंस से जुड़ा होता है, बल्कि सीधे आपके वेबपेज पर इन जैसी थोड़ी प्रतीक्षा-एनीमेशन प्रदान करता है, जिससे उपयोगकर्ता को पहली नज़र में देखने में मदद मिलती है, कि प्रतीक्षा ऑपरेशन आपकी साइट के कारण होता है न कि OS के कारण।

— क्रिस्टोफ़

यह भी देखें stackoverflow.com/questions/192900/…

— ब्रायन बर्न्स

डेस्कटॉप के लिए अच्छा विचार, मोबाइल के लिए बीएडी विचार ...

— Please_Dont_Bully_Me_SO_Lords

Answer 1

अपने jQuery के उपयोग में:

$("body").css("cursor", "progress");

और फिर वापस सामान्य करने के लिए

$("body").css("cursor", "default");

Comments

मैंने उपयोग किया $("html,body")क्योंकि मेरे पृष्ठ का शरीर केवल खिड़की के आधे हिस्से में फिट होता है इसलिए नीचे के आधे भाग पर मंडराते समय कर्सर अभी भी डिफ़ॉल्ट था।

— कीथ

पृष्ठ पर अन्य तत्व (बूटस्ट्रैप बटन) जो कर्सर को गैर-डिफ़ॉल्ट डिस्प्ले पर ओवरराइड करता है, इस दृष्टिकोण को रोक देगा, जबकि कर्सर अभी भी तत्व के ऊपर है। उन मामलों में, मैंने !importantनीचे दिए गए @ hrabinowitz के समाधान के साथ प्रयोग करना बेहतर समझा

— Addison Klinke

Answer 2

एक सहकर्मी ने एक दृष्टिकोण का सुझाव दिया जो मुझे यहां चुने गए समाधान के लिए बेहतर लगता है। सबसे पहले, CSS में, इस नियम को जोड़ें:

body.waiting * {
    cursor: progress;
}

फिर, प्रगति कर्सर चालू करने के लिए कहें:

$('body').addClass('waiting');

और प्रगति कर्सर को बंद करने के लिए कहें:

$('body').removeClass('waiting');

इस दृष्टिकोण का लाभ यह है कि जब आप प्रगति कर्सर को बंद कर देते हैं, तो आपके सीएसएस में जो भी अन्य कर्सर परिभाषित किए गए हैं उन्हें बहाल किया जाएगा। यदि सीएसएस नियम अन्य सीएसएस नियमों को खत्म करने की पूर्ववर्ती स्थिति में पर्याप्त शक्तिशाली नहीं है, तो आप शरीर और नियम के लिए एक आईडी जोड़ सकते हैं, या उपयोग कर सकते हैं !important।

Comments

उत्कृष्ट समाधान!

— केंटन डी जोंग

Answer 3

कृपया 2018 में इसके लिए jQuery का उपयोग न करें! इस पूरी क्रिया को करने के लिए केवल एक बाहरी पुस्तकालय शामिल करने का कोई कारण नहीं है जिसे एक पंक्ति के साथ प्राप्त किया जा सकता है:

स्पिनर को कर्सर बदलें: document.body.style.cursor = 'wait';

कर्सर को सामान्य पर वापस लाएँ: document.body.style.cursor = 'default';

Comments

सबसे अधिक संभावना है कि उस पृष्ठ पर कुछ है जो एक कस्टम प्रोसेसिंग कर्सर की आवश्यकता को जोड़ता है, क्या आपको नहीं लगेगा? निश्चित रूप से एक बुरी बात नहीं है, लेकिन jQuery का परिवर्तन पहले से ही कुछ और के लिए लोड किया जा रहा है ... एहम ... 100%?

— पैट्रिक

जैसा कि @ahmet ने javascript / jquery के समाधान के लिए कहा है, मुझे लगता है कि आपका उत्तर भी होना चाहिए। +1

— जेवियर

Answer 4

निम्नलिखित मेरा पसंदीदा तरीका है, और हर बार जब पृष्ठ बदलने वाला होता है, तो वह कर्सर को बदल देगा beforeunload

$(window).on('beforeunload', function(){
   $('*').css("cursor", "progress");
});

Comments

यह अब तक का सबसे आसान और सरल कार्यान्वयन है जो आप कर सकते हैं। बहुत बहुत धन्यवाद।

— JC203

Answer 5

Jquery और css का उपयोग करना:

$("#element").click(function(){ 
    $(this).addClass("wait");
});​

HTML: <div id="element">Click and wait</div>​

सीएसएस: .wait {cursor:wait}​

यहां डेमो करें

Comments

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

— टूलमेकरसेव

Answer 6

सभी एकल तत्व को ओवरराइड करें

$("*").css("cursor", "progress");

Comments

इस दृष्टिकोण के साथ समस्या यह है कि आप चयनकर्ताओं के लिए CSS शैली खो देंगे जैसे: सक्रिय /: होवर, एक बार प्रतीक्षा समाप्त हो गई

— अहमद

Answer 7

$('#some_id').click(function() {
  $("body").css("cursor", "progress");
  $.ajax({
    url: "test.html",
    context: document.body,
    success: function() {
      $("body").css("cursor", "default");
    }
  });
});

यह तब तक एक लोडिंग कर्सर बनाएगा जब तक कि आपका ajax कॉल सफल नहीं हो जाता।

Comments

@Christoph, आप हमें बेहतर कोड के साथ जवाब क्यों नहीं देते, कृपया? मैं निश्चित रूप से हमेशा बेहतर कोड पसंद करूंगा।

— बोबोर्ट

@ इस प्रश्न का बहुत अच्छा जवाब पहले से ही है। इसके अलावा यह 4 साल पुराना है और इस बीच successऔरcomplete में हटा दिया गया है इसे jQ3 में हटा दिया गया है, इसलिए आपको समारोह $.ajax(...).always(...);में सेट किया जा सकता है beforeSend।

— क्रिस्टोफ़

Answer 8

jQuery:
$("body").css("cursor", "progress");

फिर से वापस
$("body").css("cursor", "default");

शुद्ध:
document.body.style.cursor = 'progress';

फिर से वापस
document.body.style.cursor = 'default';

Answer 9

इसके लिए आपको जावास्क्रिप्ट की आवश्यकता नहीं है। आप सीएसएस का उपयोग करके अपने इच्छित कर्सर को बदल सकते हैं:

selector {
    cursor: url(myimage.jpg), auto;
}

ब्राउज़र समर्थन के लिए यहां देखें क्योंकि ब्राउज़र के आधार पर कुछ सूक्ष्म अंतर हैं

Comments

क्या आपको किसी भिन्न कर्सर में परिवर्तन को ट्रिगर करने के लिए जावास्क्रिप्ट की आवश्यकता नहीं है?

— टूलमेकरसैट

@ToolmakerSteve नहीं - आप केवल CSS का उपयोग कर सकते हैं - बस चयनकर्ता को यह परिभाषित करने के लिए बदल दें कि आप कर्सर कहाँ उपयोग करना चाहते हैं

— Manse

Answer 10

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

$(document).ajaxComplete(function(event, request, settings) {
    $('*').css('cursor', 'default');
  });

function waitCursor() {
    $('*').css('cursor', 'progress');
  }

Answer 11

यदि यह बहुत तेजी से बचाता है, तो यह प्रयास करें:

<style media="screen" type="text/css">
    .autosave {display: inline; padding: 0 10px; color:green; font-weight: 400; font-style: italic;}
</style>

<input type="button" value="Save" onclick="save();" />&nbsp;
<span class="autosave" style="display: none;">Saved Successfully</span>


$('span.autosave').fadeIn("80");
$('span.autosave').delay("400");
$('span.autosave').fadeOut("80");

Answer 12

'बॉडी' के लिए कर्सर सेट करने से पेज की पृष्ठभूमि के लिए कर्सर बदल जाएगा, लेकिन उस पर नियंत्रण के लिए नहीं। उदाहरण के लिए, बटन अभी भी नियमित कर्सर होंगे जब उनके ऊपर मँडराया जाएगा। निम्नलिखित वह है जो मैं उपयोग कर रहा हूं:

'प्रतीक्षा' कर्सर सेट करने के लिए, एक शैली तत्व बनाएं और सिर में डालें:

var css = "* { cursor: wait; !important}";
var style = document.createElement("style");
style.type = "text/css";
style.id = "mywaitcursorstyle";
style.appendChild(document.createTextNode(css));
document.head.appendChild(style);

फिर कर्सर को पुनर्स्थापित करने के लिए, शैली तत्व को हटा दें:

var style = document.getElementById("mywaitcursorstyle");
if (style) {
  style.parentNode.removeChild(style);
}

Answer 13

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

इस काम को करने के लिए दो शर्तें हैं। सबसे पहले आपको स्टाइल को स्टाइल शीट या पेज के हेडर में स्टाइल टैग्स के साथ सेट करना होगा, न कि इनलाइन स्टाइल के रूप में और दूसरा वेट स्टाइल को खाली स्ट्रिंग पर सेट करके अपनी स्टाइल को रीसेट करना है।