मुझे हाल ही में मेरे जावास्क्रिप्ट कोड के साथ समस्या हो रही है और मेरे $(document).ready() से मेरे कोड का एक हिस्सा ले रहा है और इसे $(window).load() में समस्या को हल किया है।
अब मैं समझता हूँ कि window.load सिर्फ document.ready के बाद निकाल दिया जाता है, लेकिन क्यों यह document.ready के बाद तैयार नहीं है, कि window.load() के बाद है?
load को तब कहा जाता है जब सभी संपत्तियां छवियों सहित लोड हो रही हैं। ready निकाल दिया जाता है जब डोम बातचीत के लिए तैयार होता है।
MDC से, window.onload:
दस्तावेज़ लोड हो रहा है प्रक्रिया के अंत मेंलोड घटना आग। इस बिंदु पर, दस्तावेज़ में सभी ऑब्जेक्ट्स डोम में हैं, और सभी छवियां और उप-फ्रेम लोड हो चुके हैं।
jQuery API दस्तावेज़ों से, .ready(handler):
जावा स्क्रिप्ट कोड को क्रियान्वित जब एक पृष्ठ प्रदान की गई है के लिए घटना लोड प्रदान करता है, इस घटना नहीं मिलता है जब तक सभी परिसंपत्तियों ऐसे शुरू हो रहा छवियों को पूरी तरह से प्राप्त किया गया है। ज्यादातर मामलों में, स्क्रिप्ट को चलाया जा सकता है जैसे ही DOM पदानुक्रम पूरी तरह से निर्मित किया गया है। हैंडलर से पहले से ही को डीओएम तैयार होने के बाद निष्पादित किया गया है, इसलिए यह आमतौर पर के लिए सबसे अच्छी जगह है अन्य सभी ईवेंट हैंडलर और अन्य jQuery कोड चलाएं। स्क्रिप्ट्स का उपयोग करते समय जो सीएसएस शैली गुणों के मूल्य पर भरोसा करते हैं, संदर्भ बाहरी स्टाइलशीट या स्क्रिप्ट को संदर्भित करने से पहले से पहले एम्बेड शैली तत्वों के लिए महत्वपूर्ण है।
"स्क्रिप्ट को संदर्भित करने से पहले बाहरी स्टाइलशीट या एम्बेड शैली तत्वों को संदर्भित करना महत्वपूर्ण है"। यह DOMContentLoaded की परिभाषा के विपरीत है, जो jQuery.ready() का उपयोग करता है: "DOMContentLoaded ईवेंट को निकाल दिया जाता है जब प्रारंभिक HTML दस्तावेज़ पूरी तरह से लोड किया गया है और पार्स किया गया है, स्टाइलशीट, छवियों और उप-फ्रेम को लोड करने के लिए प्रतीक्षा किए बिना।" एक एसिंक पर्यावरण में "पहले" एक मुश्किल शब्द है। क्या गारंटी देने का कोई तरीका है कि स्टाइलशीट पहले से लोड हो जाती है।()?"हेड" में "लिंक" टैग डालने से यह गारंटी मिलती है? – spekary
$(document).ready() का अर्थ है कि आपके पृष्ठ का डोम हेरफेर करने के लिए तैयार है।
window.load() ट्रिगर किया गया है जब पूरा पृष्ठ (सीएसएस और छवि फ़ाइलों जैसे घटक) पूरी तरह से लोड हो गया है।
आप क्या हासिल करने की कोशिश कर रहे हैं?
मैं छवियों में हेरफेर करने की कोशिश कर रहा था, लेकिन जब मैंने दस्तावेज़ तैयार किया तो मुझे त्रुटियां मिल रही थीं, लेकिन फिर मैंने एक स्निपेट देखा जो मैं चाहता था कि कुछ ऐसा ही कर रहा था लेकिन वहां कोड में एकमात्र अंतर $ (विंडो) था। लोड और मैं $ (दस्तावेज़) का उपयोग कर रहा था .ready() –
हाँ $ (विंडो) का उपयोग कर .load सही विकल्प है। यह पता लगाता है कि आपकी छवि सफलतापूर्वक लोड हो गई है या नहीं। बस आप $ (विंडो)। $ (दस्तावेज़) के तहत लोड कर सकते हैं। पहले से ही। तो यह इस $ (दस्तावेज़) की तरह होगा। पहले से ही ($ (विंडो) .load() {}) –
$(document).ready(function(){
//code here
});
उपरोक्त कोड लगभग हर बार उपयोग किया जाता है जब हम jQuery के साथ काम करते हैं।
यह कोड तब उपयोग किया जाता है जब हम DOM तैयार होने के बाद हमारे jQuery कोड प्रारंभ करना चाहते हैं।
$(window).load()
कभी-कभी आप चित्रों में हेरफेर करना चाहते हैं। उदाहरण के लिए आप लंबवत और क्षैतिज रूप से एक तस्वीर को संरेखित करना चाहते हैं और ऐसा करने के लिए आपको चित्र की चौड़ाई और ऊंचाई प्राप्त करने की आवश्यकता है।$(document).ready() के साथ आप ऐसा करने में सक्षम नहीं होंगे यदि विज़िटर के पास पहले से लोड की गई छवि नहीं है, तो इस स्थिति में जब छवि लोड होने पर आपको jquery संरेखण फ़ंक्शन प्रारंभ करना होगा। यही वह जगह है जहां हम $(window).load()
$(document).readyjQuery ईवेंट है जो DOM लोड होने पर निकाल दिया जाता है, इसलिए दस्तावेज़ संरचना तैयार होने पर इसे निकाल दिया जाता है।
$(window).load ईवेंट पूरी सामग्री (सीएसएस, छवियों आदि सहित) के बाद निकाल दिया जाता है।
यह बड़ा अंतर है।
$(document).ready()<body>...</body>
$(window).load() में डोम लपेट है दस्तावेज़ के पिताजी <html>...</html>
में सभी डोम लपेट के प्रसंस्करण प्रस्तुत करना बचाने के लिए अपने मामले में उपयोग करते हैं है।
लोड स्थिति राज्य है जब विंडो ऑब्जेक्ट बनाया गया है और डीओएम समेत सभी आवश्यक घटकों को स्मृति में लोड किया गया है, लेकिन पृष्ठ में इसे प्रस्तुत करने के लिए प्रतिपादन इंजन को पास नहीं किया गया है।
दूसरी तरफ तैयार राज्य यह सुनिश्चित करता है कि डीओएम तत्व, घटनाएं और अन्य आश्रित घटक पृष्ठ पर प्रदान किए गए प्रतिपादन इंजन पर भेजे जाते हैं, और बातचीत और हेरफेर के लिए तैयार हैं।
सरल शब्दों में, window.load कहा जाता है जब खिड़की की सभी सामग्री लोड होती है जबकि document.ready को कॉल किया जाता है जब दस्तावेज़ लोड होता है और दस्तावेज़ संरचना तैयार होती है।
$ (दस्तावेज़)। तुलनात्मक रूप से स्लाइडर तेजी से $ (विंडो) .load इवेंट में है।
$ (दस्तावेज़)। डोम लोड होने पर पहले से ही आग लगती है लेकिन $ (विंडो) .लोड आग जब डोम, सीएसएस और छवियों को पूरी तरह से लोड किया जाता है।
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://code.jquery.com/jquery-1.12.4.js" ></script>
<script>
$(window).load(function() {
var img = $('#img1');
alert("Image Height = " + img.height() + "<br>Image Width = " + img.width());
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="img1" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTozkxoNSH8739juRXJJX5JxREAB6I30bFyexPoCdRVa2fKfH2d" />
</div>
</form>
</body>
</html>$(document).ready एक jQuery घटना है। जैसे ही डोम लोड हो जाता है और स्क्रिप्ट द्वारा छेड़छाड़ करने के लिए तैयार होता है। पृष्ठ लोड प्रक्रिया में यह सबसे शुरुआती बिंदु है जहां स्क्रिप्ट सुरक्षित रूप से पृष्ठ के HTML DOM में तत्वों तक पहुंच सकता है। इस घटना को सभी छवियों, सीएसएस इत्यादि से पहले निकाल दिया जाता है।
window.load() ट्रिगर किया गया है जब पूरा पृष्ठ (सीएसएस और छवि फ़ाइलों जैसे घटक) पूरी तरह से लोड हो गया है।
आप यहां प्रलेखन पढ़ सकते हैं: http://api.jquery.com/ready/ – epascarello
मैंने छोटे लेख को लिखा जिसमें इस बारे में बताने के लिए एक अच्छा संदर्भ है: http://amrelgarhy.com/blog/how-to -tell-when-images-have-loaded/ –