jQuery शो "लोडिंग"

Question

मैं jQuery के साथ धीमे ऑपरेशन के दौरान एक छोटी लोडिंग छवि दिखाने की कोशिश कर रहा हूं और इसे सही नहीं कर सकता। यह हजारों पंक्तियों के साथ एक बड़ी मेज है। जब मैं "mostrarArticulosDeReferencia" चेकबॉक्स को चेक करता हूं तो यह इन पंक्तियों से "छिपी हुई" कक्षा को हटा देता है। इस ऑपरेशन में कुछ सेकंड लगते हैं और मैं कुछ फीडबैक देना चाहता हूं। "लोड हो रहा" एक छोटी सी ऐनिमेटेड gif

यहाँ के साथ एक div है "के अनुकूलन" उन 3 लाइनों

 jQuery("#loading").show(); //not showing 
     jQuery("#listadoArticulos tr.r").removeClass("hidden"); 
     jQuery("#loading").hide(); 

और कभी नहीं लोड हो रहा है पता चलता पूर्ण कोड

jQuery(document).ready(function() { 
jQuery("#mostrarArticulosDeReferencia").click(function(event){ 
    if(jQuery("#mostrarArticulosDeReferencia").attr("checked")) { 
     jQuery("#loading").show(); //not showing 
     jQuery("#listadoArticulos tr.r").removeClass("hidden"); //slow operation 
     jQuery("#loading").hide(); 
    } else { 
     jQuery("#loading").show(); //not showing 
     jQuery("#listadoArticulos tr.r").addClass("hidden"); //slow operation 
     jQuery("#loading").hide(); 
    } 
}); 
jQuery("#loading").hide(); 
}); 

यह jQuery की तरह लग रहा है div। कोई विचार?

बोनस: इस शो/छुपा चीज करने का एक तेज़ तरीका है? पता चला कि टॉगल रास्ता धीमा है।

अद्यतन: मैं इस

jQuery("#mostrarArticulosDeReferencia").click(function(event){ 
    if(jQuery("#mostrarArticulosDeReferencia").attr("checked")) { 
      jQuery("#loading").show(); //not showing 
      jQuery("#listadoArticulos tr.r").removeClass("hidden"); //slow operation 
      setTimeout("jQuery('#loading').hide()", 1000); 
    } else { 
      jQuery("#loading").show(); //not showing 
      jQuery("#listadoArticulos tr.r").addClass("hidden"); //slow operation 
      setTimeout("jQuery('#loading').hide()", 1000); 
    } 
}); 

की कोशिश की है यही कारण है कि मैं चेकबॉक्स पर

1. क्लिक
2. 2/3 सेकेंड (प्रोसेसिंग)
3. पेज अद्यतन हो जाता है
दौरान कुछ भी नहीं होता मिल
4. लोडिंग div एक विभाजित दूसरे
के दौरान दिखाता है

अद्यतन 2: मुझे एक समाधान समाधान मिला है। बस इस विशेष मामले के लिए एक बेहतर समाधान पाया: लेकिन क्यों मैं इसे काम करने के लिए setTimeout का उपयोग करने के लिए है

jQuery("#mostrarArticulosDeReferencia").click(function(event){ 
    if(jQuery("#mostrarArticulosDeReferencia").attr("checked")) { 
      jQuery("#loading").show(); 
      setTimeout("jQuery('#listadoArticulos tr.r').removeClass('hidden');", 1); 
      setTimeout("jQuery('#loading').hide()", 1); 
    } else { 
      jQuery("#loading").show(); 
      setTimeout("jQuery('#listadoArticulos tr.r').addClass('hidden');", 1); 
      setTimeout("jQuery('#loading').hide()", 1); 
    } 
}); 

अद्यतन 3 मुझे परे है ...।

//mostrar u ocultar articulos de referencia 
$("#mostrarArticulosDeReferencia").click(function(event){ 
    if($("#mostrarArticulosDeReferencia").attr("checked")) 
     $("tr.r").css({'display':'table-row'}); 
    else 
     $("tr.r").css({'display':'none'}); 
}); 

({ 'प्रदर्शन': 'कोई नहीं'}) .css का उपयोग करते हुए पता चला है छिपाने() की तुलना में तेजी से रास्ता है, इसलिए लोड हो रहा है एनीमेशन के लिए कोई जरूरत नहीं ...
यह लेख मुझे प्रकाश दिखाया : show/hide performance।

Answer 1

मैंने सबकुछ करने की कोशिश की और मुझे यह निष्कर्ष निकालना है कि यह एक ब्राउज़र brainfart का उत्पाद है।

1. jQuery ब्राउज़र बताता है दिखाने के लिए/लोड हो रहा है div
2. jQuery जोड़ने के लिए ब्राउज़र बताता छिपाने/पंक्तियों
3. jQuery ब्राउज़र बताता से छिपा वर्ग को दूर दिखाने/करने के लिए लोड हो रहा है div छिपाने
4. ब्राउज़र को सही क्रम में सभी चरणों पर अमल यद्यपि ब्राउज़र मजबूर कर रहा है मेरी अंतिम अद्यतन में गलत क्रम (2 पहली जगह में) में उपरोक्त सभी चरणों

'setTimeout' करता है। यह बेकार है, सुरुचिपूर्ण नहीं है, लेकिन कम से कम यह काम करता है ...

अद्यतन: सेटटाइमआउट आवश्यक है क्योंकि jquery आदेशों की श्रृंखला को सरल बनाता है। यदि मैं इसे एक तत्व को छिपाने के लिए कहता हूं और इसे फिर से दिखाता हूं, तो यह केवल कमांड को अनदेखा कर देगा क्योंकि अंतिम परिणाम कुछ भी नहीं होगा जैसा ...

Answer 2

क्या आपने अपना अपडेट फ़ंक्शन चलाने के लिए ajaxStart का उपयोग करने का प्रयास किया है?

Answer 3

मुझे लगता है कि यह सही तरीके से काम कर रहा है। इस आपरेशन:

jQuery("#listadoArticulos tr.r").removeClass("hidden"); 

वास्तव में है कि धीमी गति नहीं है और यह, कुछ एमएस सबसे ऊपर में प्रदर्शन किया है ताकि आप जानकारी लोड नहीं दिख रहा है, क्योंकि यह सिर्फ वहाँ एक बहुत ही कम समय के लिए है।

Answer 4

मुझे लगता है कि आप इस शो के लिए एक कॉलबैक फ़ंक्शन के अंदर

jQuery("#listadoArticulos tr.r").removeClass("hidden"); 

कर करना चाहते हैं।

विधि प्रलेखन यहाँ पर देखो: http://docs.jquery.com/Effects/show

आप show(0);

को फोन करके एक ही "तुरंत दिखा" प्रभाव को प्राप्त कर सकते हैं लेकिन आप कॉलबैक करना चाहते हैं? कोई समस्या नहीं, यह करें:

show(0, function() { jQuery("#listadoArticulos tr.r").removeClass("hidden"); }); 

सरल! :)

Answer 5

मैंने इस व्यवहार को भी देखा है और यह उपयोग किए गए ब्राउज़र पर निर्भर करता है। आईई सबसे ज्यादा प्रभावित है। इसका कारण यह नहीं है कि jQuery धीमा है, हालांकि जावास्क्रिप्ट आईई में धीमा चलता है, लेकिन नए एचटीएमएल के प्रतिपादन के कारण अधिक है। कारणटाइमआउट() मदद करता है क्योंकि यह पहली क्रिया करता है और केवल जब ब्राउज़र को नए HTML को प्रस्तुत किया जाता है तो दूसरा भाग किया जाता है। पूरा ऑपरेशन वास्तव में धीमा है लेकिन फीडबैक इसे अच्छा बनाता है।

इसका प्रदर्शन करने का एक तरीका लंबी तालिका को छिपाकर और एक ही कोड चलाकर है। यह वही करेगा, लेकिन तालिका अदृश्य है और पूरी कार्रवाई प्रस्तुत नहीं करती है।

इसके आसपास जाने के कुछ तरीके हैं।

1. टेबल से बचने और इसके बजाय एक DIV लेआउट के लिए जाने का प्रयास करें। सारणी धीमी गति से प्रस्तुत होती है और ब्राउज़र के आधार पर तालिका केवल तब दिखाई दे सकती है जब पूरी तरह से प्रस्तुत की जाती है।
2. यदि आपको तालिका का उपयोग करना चाहिए तो 100 पंक्तियों के साथ कई पंक्तियों का उपयोग करके विचार करें। इस तरह पृष्ठ पहली बार तालिका को दोबारा सुधारने के साथ ही प्रस्तुत करना शुरू कर देता है।
3. यदि एक बड़ी मेज जाने का एकमात्र तरीका है और आप जानते हैं कि उपयोगकर्ता केवल शीर्ष पंक्तियों को देख सकता है, तो आप दो बार कार्रवाई कर सकते हैं, शीर्ष पंक्तियों पर पहली बार और सभी पंक्तियों पर दूसरी बार। यह सबसे धीमा और कम से कम इष्टतम समाधान है लेकिन कार्रवाई में एक jQuery फ़िल्टर जोड़कर कार्यान्वित करना बहुत आसान हो सकता है।

Answer 6

इस मूल सवाल का जवाब नहीं है, लेकिन यह मेज पर ही एक वर्ग के लिए एक CSS नियम का उपयोग करने के लिए किसी भी तेजी से होता है:

#listadoArticulos.hideCertainRows tr.r { display: none } 

और इस तरह प्रदर्शन टॉगल:

jQuery("#listadoArticulos").addClass("hideCertainRows"); 

?

Answer 7

जाहिर है आप "लंबी प्रक्रिया चल" के दौरान एक अतुल्यकालिक अनुरोध (हाँ, अतुल्यकालिक, दूसरे शब्दों में, यह कोड के साथ सिंक में नहीं चलता है!) फायरिंग कर रहे हैं। एसिंक्रोनस अनुरोध के कॉलबैक फ़ंक्शन के अंत में आपको $('#loading').hide() पर कॉल करने की आवश्यकता है।

$('#loading').show(); 
$.getJSON('someURL', function(data) { 
    // Do slow processing. 
}); 
$('#loading').hide(); 

यह स्पष्ट रूप से नहीं काम करने के लिए जा रहा है:

यहाँ एक उत्कृष्ट उदाहरण है। यह दिखाएगा, एक एसिंक्रोनस अनुरोध आग और फिर तुरंत छुपाएं। आप के रूप में कोड को फिर से लिखने की जरूरत है:

$('#loading').show(); 
$.getJSON('someURL', function(data) { 
    // Do slow processing. 
    $('#loading').hide(); 
}); 

Answer 8

बस एक नोट - मैं इसे में एक लोड हो रहे ग्राफ़िक से आच्छादन div बनाने के लिए एक plugin विकसित किया है।

Answer 9

तो जैसे कहीं अपने पृष्ठ पर एक div रखो:

<div id="spinner" class="spinner" style="display:none;"> 
    <img id="img-spinner" src="@Url.Content("~/images/loading.gif")" alt="Loading"/> 
</div> 

फिर शो हुक और इतने तरह ajaxStart, ajaxStop, और ajaxError घटनाओं के लिए छिपाने: कॉलबैक का उपयोग करने के

$("#spinner").bind("ajaxSend", function() { $(this).show(); }) 
$("#spinner").bind("ajaxStop", function() { $(this).hide(); }) 
$("#spinner").bind("ajaxError", function() { $(this).hide(); }); 

Answer 10

कोशिश शो विधि का "पूर्ण", जेएस ज्यादातर एसिंक घटनाओं में आधारित है, और यह तीन पंक्तियां:

jQuery("#loading").show(); //not showing 
jQuery("#listadoArticulos tr.r").removeClass("hidden"); 
jQuery("#loading").hide(); 

जी हैं इंतजार किए बिना निष्पादित किया जा रहा है, इसलिए, आपका प्रदर्शन, वर्ग जोड़ना और तुरंत div को छिपाना, यही कारण है कि आप div को नहीं देख सकते हैं, आप बिना दिखाए प्रतीक्षा किए छुपा रहे हैं और ऐसा लगता है और वास्तव में गायब हो जाता है, या यहां तक ​​कि गायब हो जाता है यह कभी दिखाई नहीं दे सकता है (उस प्रकार के किसी भी अनुकूलन के बारे में नहीं पता)।

यदि आप पूर्ण कॉलबैक के अंदर दो अंतिम जोड़ते हैं तो यह अधिक http: //api.jquery काम करेगा।com/दिखाएँ /:

jQuery("#loading").show(400, function(){ 
    jQuery("#listadoArticulos tr.r").removeClass("hidden"); 
    jQuery("#loading").hide(); 
}); 

किसी भी मामले में, यह भी, ajax अनुरोध के लिए यह करने के लिए सही तरीका (मैं कल्पना किसी के लिए उपयोगी होने जा रहा है) ajaxStart और ajaxStop उपयोग कर रहा है इस तरह:

$(document).ajaxStart(function() { 
    $("#loading").show(); 
}).ajaxStop(function() { 
    $("#loading").hide(); 
}); 

कॉलबैक का removeClass अनुपस्थिति के लिए

अलावा:

हो सकता है कि आपकी समस्या तथ्य removeClass के लिए कोई कॉलबैक है कि वहाँ पर रखना है, लेकिन आप आगे क्या कर सकते हैं:

jQuery("#loading").show(400, function(){ 
    var els = jQuery("#listadoArticulos tr.r"); 
    els.each(function(i, el) { 
     el.removeClass("hidden"); 
     if (els.length == i +1) jQuery("#loading").hide(); 
    }); 
}); 

यह भी प्रयास करें:

var els = jQuery("#listadoArticulos tr.r"); 
els.each(function(i, el) { 
    if (i == 0) jQuery("#loading").show(); 
    el.removeClass("hidden"); 
    if (els.length == i +1) jQuery("#loading").hide(); 
}); 

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

मुझे लगता है कि यह 2 साल पहले था, शायद आपको इसकी आवश्यकता नहीं है।