$ (दस्तावेज़) .ready() बहुत जल्दी

तो आग लगती है, इसलिए मुझे जावास्क्रिप्ट के साथ तत्व की चौड़ाई जानने की ज़रूरत है, मेरी समस्या यह है कि फ़ंक्शन बहुत जल्दी आग लग जाता है और जब सीएसएस को मजबूती से लागू किया जाता है तो चौड़ाई बदल जाती है। जैसा कि मैंने समझा, दस्तावेज पूरा होने पर $ (दस्तावेज़) .ready() फ़ंक्शन निकाल दिया गया था, लेकिन ऐसा लगता है कि ऐसा नहीं लगता है।

फिर भी, मुझे यकीन है कि कोड मेरी समस्या माने जाएँगे साथ (यह एक सरल उदाहरण है) कर रहा हूँ:

<html> 
<head> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <link href='http://fonts.googleapis.com/css?family=Parisienne' rel='stylesheet' type='text/css'> 

    <style type="text/css"> 
     #target { 
      font-family: 'Parisienne', cursive; 
      float: left; 
     } 
    </style> 
</head> 
<body> 
    <div id="target">Element</div> 
</body> 
</html> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
     console.debug($('#target').outerWidth()); 
     alert('hold on'); 
     console.debug($('#target').outerWidth()); 
    }); 
</script>

मैं #target div की चौड़ाई में जानना चाहते हैं, समस्या यह है कि है चेतावनी से पहले निष्पादित कोड एक के बाद एक अलग आउटपुट देता है, संभवतः क्योंकि फ़ॉन्ट पूरी तरह से लोड नहीं होता है और यह डिफ़ॉल्ट फ़ॉन्ट के साथ div को माप रहा है।

यह काम करता है जैसा कि मैं Google क्रोम में अपेक्षा करता हूं, लेकिन यह आईई और फ़ायरफ़ॉक्स पर नहीं है।

स्रोत

2012-02-03 Noel De Martin

मैं 2013-11-24 पुष्टि कर सकते हैं कि इस समस्या को अभी भी JQuery 2.x पर मौजूद है जब आप ब्राउज़र के रिफ़्रेश बटन मारा। इस [fiddle] पर जाएं (http://jsfiddle.net/jLDbX/)। जब आप पहली बार बेवकूफ लोड करते हैं, तो सब कुछ सबसे अच्छा काम करना चाहिए। यह भी काम करता है अगर आप यूआरएल में अपना माउस कर्सर डालते हैं और एंटर दबाते हैं। लेकिन अगर आप रीफ्रेश बटन पर क्लिक करते हैं या * CTRL + R * हिट करते हैं तो चीजें नरक में जाएंगी। –

मैंने चौड़ाई और ऊंचाई को मापने के लिए केवल "गिनती नीचे" लागू करने की कोशिश की, जब खिड़की के भार को निकाल दिया गया और जब निर्भर फ़ॉन्ट्स ने आग समाप्त कर दी। देखें कि यह मदद करता है: [http://jsfiddle.net/jLDbX/1/](http://jsfiddle.net/jLDbX/1/)। इस पहेली में, सबकुछ ठीक काम कर रहा है। लेकिन मेरे असली दुनिया के आवेदन में, मुझे त्रुटियां मिल रही थीं। हालांकि आपके लिए यह काम कर सकता है। –

आप बाह्य सामग्री पर भरोसा करते हैं पहले से ही लोड करने के लिए (जैसे छवियों, फोंट), तो आपको window.load घटना

$(window).load(function() { 
    // code here 
});

इन घटनाओं के व्यवहार this article में वर्णन किया गया उपयोग करने के लिए की जरूरत है।

स्रोत

2012-02-03 20:19:57

दो साल बाद, अभी भी सहायक! – statue

JQuery 3.0 में, आपको सिंटैक्स '$ (विंडो) .on ('load', function() { }) का उपयोग करना चाहिए, क्योंकि $ (विंडो) .load() को बहिष्कृत किया गया है। –

@AlexH, अच्छा बिंदु। '$ (विंडो) .load()' jQuery 1.8 में बहिष्कृत किया गया था। इसके अलावा, यह भ्रमित है क्योंकि jQuery में दो '.load() 'विधियां हैं (ईवेंट को संभालने से पहले एक हटा दिया गया था)। – ryanpcmcquen

उद्धरण ओपी:

"जैसा कि मैं समझ गया, जब दस्तावेज़ पूरा हो गया है $(document).ready() समारोह निकाल दिया गया था,"

$(document).ready() पर सक्रिय होता है डोम ("दस्तावेज़ ऑब्जेक्ट मॉडल ") पूरी तरह से भरा हुआ है और छेड़छाड़ करने के लिए तैयार है। डीओएम "दस्तावेज़" जैसा नहीं है।

W3C - DOM Frequently Asked Questions

आप $(window).load() समारोह के बजाय कोशिश कर सकते हैं ...

$(window).load(function() { 
    // your code 
});

यह सब पेज की संपत्ति पूरी तरह से फायरिंग से पहले लोड करने के लिए (छवियों और फोंट, आदि) के लिए इंतजार करेंगे।

स्रोत

2012-02-03 20:18:16 Sparky

jQuery .ready() फ़ंक्शन आग समाप्त होने के तुरंत बाद आग लगती है। इसका मतलब यह नहीं है कि सभी संपत्तियां (जैसे छवियों, सीएसएस इत्यादि) को उस पल में लोड किया गया है और इसलिए तत्वों का आकार बदल सकता है।

यदि आपको किसी तत्व के आकार की आवश्यकता है तो $ (विंडो) .load() का उपयोग करें।

स्रोत

2012-02-03 20:22:18 Jay

आप $(window).load() का उपयोग कर सकते हैं, लेकिन यह सभी संसाधनों (उदाहरण के लिए, छवियों, आदि) का इंतजार कर सकता है। आप केवल के लिए फ़ॉन्ट लोड करने के लिए प्रतीक्षा करने के लिए चाहते हैं, आप कुछ इस तरह की कोशिश कर सकते:

<script type="text/javascript"> 
    var isFontLoaded = false; 
    var isDocumentReady = false; 
    $("link[href*=fonts.googleapis.com]").load(function() { 
     isFontLoaded = true; 
     if (isDocumentReady) { 
      init(); 
     } 
    }); 
    $(document).ready(function() { 
     isDocumentReady = true; 
     if (isFontLoaded) { 
      init(); 
     } 
    }); 
    function init() { 
     // do something with $('#target').outerWidth() 
    } 
</script>

अस्वीकरण: मैं पूरी तरह यकीन है कि यह काम करेगा नहीं हूँ। <link> ऑनलोड ईवेंट जैसे ही स्टाइलशीट को पार्स किया जा सकता है, लेकिन इसके बाहरी संसाधनों को डाउनलोड करने से पहले। शायद आप एक छिपा <img src="fontFile.eot" /> जोड़ सकते हैं और इसके बजाय छवि पर अपना अधिभार हैंडलर डाल सकते हैं।

स्रोत

2012-02-03 20:22:44 gilly3

"तैयार" घटना तब होती है जब डोम लोड होता है जिसका अर्थ है कि मार्कअप के साथ सुरक्षित रूप से काम करना संभव है।

सभी संपत्तियों को लोड करने के लिए प्रतीक्षा करने के लिए (सीएसएस, छवियों, बाहरी जावास्क्रिप्ट ...), आप लोड ईवेंट का उपयोग करना चाहते हैं।

$(window).load(function() { 
    ... 
});

स्रोत

2012-02-03 20:24:26

मैंने पूरी तरह से आईई 9 और आईई 10 में एक ही समस्या को दोहराया है। Jquery तैयार() कॉल आग और मेरे < div> में से एक मौजूद नहीं है। यदि मैं इसका पता लगाता हूं और फिर एक संक्षिप्त टाइमआउट के बाद फिर से कॉल करता हूं() यह ठीक काम करता है।

मेरे समाधान, सुरक्षा के लिए किया गया था, दो गुना:

संलग्न एक < script> window.fullyLoaded = true </script> दस्तावेज़ के अंत में तो तैयार() कॉलबैक में उस चर के लिए जाँच, और
चेक $ अगर ('# lastElementInTheDocument')। लंबाई> 0

हाँ, मुझे पता है कि ये बुरा हैक्स हैं। हालांकि, जब तैयार() काम के रूप में काम नहीं कर रहा है किसी तरह के काम की जरूरत है!

एक तरफ, "सही" समाधान में शायद $ .holdReady को हेडर में सेट करना और दस्तावेज़ के अंत में इसे साफ़ करना शामिल है। लेकिन निश्चित रूप से, वास्तव में सही समाधान तैयार करने के लिए तैयार है()।

स्रोत

2013-03-27 19:41:02 jeesty

मुझे लगता है कि मैं इस व्यवहार को भी देख रहा हूं। शायद समाधान पृष्ठ के निचले हिस्से में document.ready आदेश डालना है, जो इन दिनों एक अधिक आम प्रथा प्रतीत होता है। मुझे यह समस्या दिखाई दे रही है, लेकिन मुझे वर्तमान में टैग में मेरा दस्तावेज़ मिला है। – hairbo

समस्या $ (दस्तावेज़) .ready() आग बहुत जल्दी कभी-कभी हो सकती है क्योंकि आपने jQuery ऑनरेडी फ़ंक्शन को अनुचित तरीके से घोषित कर दिया है।

में समस्याएं हो रही है, अपने समारोह वास्तव में तो जैसे घोषित किया जाता है सुनिश्चित करें:

$(document).ready(function() 
{ 
    // put your code here for what you want to do when the page loads. 
});

उदाहरण के लिए, यदि आप गुमनाम समारोह हिस्सा भूल गए हैं, कोड अब भी चलेगा, लेकिन यह पता चलेगा " आदेश का"।

console.log('1'); 
$(document).ready() 
{ 
    console.log('3'); 
} 
console.log('2');

इस वसीयत उत्पादन

1 
3 
2

स्रोत

2013-11-02 02:24:38

$ (दस्तावेज़) .ready() बहुत जल्दी

उत्तर

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