जैसाकि हमने पहले भी कहा कि जैसे ही हमारे Web Page का DOM Tree Create हो जाता है, jQuery का ready() Method Run हो जाता है। लेकिन कई बार हमें हमारे Web Page के किसी Resource के साथ काम करना होता है और ready() Method के Fire होने तक Web Browser में हमारे Web Page का कोई भी Resource Load नहीं हुआ होता है। इस स्थिति में हम ready() Method के स्थान पर window.onload Event Handler को Use करते हैं। लेकिन jQuery हमें एक ऐसा Method Provide करता है, जिसका प्रयोग करके हम jQuery के ready() Method को तब तक Fire होने से रोक सकते हैं, जब तक कि वह Resource Web Browser में पूरी तरह से Load नहीं हो जाता, जिसके साथ हम हमारे ready() Method में कोई प्रक्रिया करना चाहते हैं।
उदाहरण के लिए मानलो कि हमें jQuery के माध्यम से हमारे Web Page पर Load होने वाली किसी Image के Dimension को Change करना है। तो हम ready() Event Handler में अपनी उस Image के Dimension को तब तक Change नहीं कर सकते, जब तक कि वह Image Web Browser में पूरी तरह से Download न हो जाए।
जबकि हम जानते हैं कि jQuery का ready() Method, Web Page के DOM Tree के Create होते ही Fire हो जाता है और इस ready() Event Handler के Fire होने के बाद Image, Web Browser में Download होना शुरू होता है। इस स्थिति में जब ready() Event Fire होता है, तब वह Image Web Browser की Memory में होता ही नहीं है, जिसके Dimension को Access करना है।
इस परेशानी से बचने के लिए हम सामान्यत: ready() Event Handler के स्थान पर window.onload Event Handler को Use करते हैं। लेकिन jQuery हमें holdReady() नाम का एक ऐसा Method Provide करता है, जिसे Use करके हम हमारे ready() Event Handler को तब तक Fire होने से रोक सकते हैं, जब तक कि हमारा Image, Web Browser में पूरी तरह से Load न हो जाए।
holdReady() Method Parameter के रूप में केवल एक Boolean Value Accept करता है। जब हम इस Event Method में true Pass करते हैं, तो ये Method हमारे ready() Event को तब तक के लिए Fire होने से रोक देता है, जब तक कि हम इसी Method में फिर से false Parameter Pass नहीं कर देते।
जब हम holdReady() Method को Use करते हैं, तब हमें इस बात का विशेष रूप से ध्यान रखना जरूरी होता है कि हम इस Method को हमेंशा ready() Method से पहले Specify करें, ताकि ये Method, ready() Method को Fire होने से रोक सके।
यदि हम इसे ready() Method के बाद Specify करते हैं, तो फिर इस Method को Use करने का कोई मतलब नहीं रह जाता क्योंकि जब तक JavaScript Interpreter इस Method तक पहुंचता है, तब तक ready() Event Fire हो चुका होता है, जबकि इस Method को Use करने का मूल उद्देश्य ही ready() Event को Fire होने से रोकना या Delay करना होता है।
//File Name: AllResourcesAreReadyToBeAccessedViaJQuery.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Using holdReady to delay the ready Event to be fired</title>
</head>
<body>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script><script>
jQuery.holdReady(true);
alert('jQuery ready event being released');
jQuery.holdReady(false);
$('document').ready(function ($) {
jQuery("<h1> ready event was delayed via holdReady </h1>").appendTo('body');
});
</script>
</body>
</html>
जब हम इस Web Page को Web Browser में Load करते हैं, तो Web Page का DOM Create होते ही jQuery का ready() Event Fire होने के लिए तैयार हो जाता है और हमें हमारा Web Page निम्नानुसार दिखाई देता है:
क्योंकि हमने holdReady() Method में Parameter के रूप में true मान Specify किया है। साथ ही एक Alert Box हमें इस बात की Information देता है कि जैसे ही हम Alert Box को Close करेंगे, निम्न Statement द्वारा ready Event Fire होने के लिए Release हो जाएगा:
jQuery.holdReady(true);
jQuery.holdReady(false);
परिणामस्वरूप इस Statement में holdReady() Method में false Value Specify होने की वजह से अब ready Event Fire हो जाता है और हमें हमारा Web Page निम्नानुसार दिखाई देने लगता है:
आप समझ सकते हैं कि यदि हम holdReady() Method को Use करें, तो हमें उस स्थिति में window.onload Event Handler को Use करने की जरूरत नहीं होती है, जबकि हमारा jQuery Code किसी ऐसे Resource को Access करना चाहता है, जो कि ready() Event के Fire होने के बाद Web Browser में Download होता है, क्योंकि holdReady() Method द्वारा हम हमारे ready() Event को तब तक Fire होने से रोक सकते हैं, जब तक कि वह Resource Web Browser में पूरी तरह से Load न हो जाए, जिस पर हमारा jQuery Code कोई Action Perform करना चाहता है।
सामान्यत: holdReady() Method का प्रयोग हम तब करते हैं जब हमें किसी External Resource जैसे कि Image, Object, Frame, Iframe आदि पर कोई Operation Perform करना होता है अथवा हमें हमारे JavaScript Code में किसी ऐसे JavaScript Function को Use करना होता है, जिसे किसी अन्य External JavaScript File में Define किया गया है। या फिर हमें किसी ऐसी CSS Class को Use करना होता है, जिसे किसी External CSS File में Specify किया गया होता है और हम इन External Files में Define कि, गए Functions या CSS Rules को तब तक Access नहीं कर सकते, जब तक कि ये Resources पूरी तरह से Web Browser में Download न हो जाऐ।
इस स्थिति में हम उपरोक्त उदाहरण के अनुसार holdReady() Method को Use करके ready() Event को तब तक Fire होने से रोक देते हैं, जब तक कि वह Resource Web Browser में पूरी तरह से Download न हो जाए, जिस पर ready() Event Handler को कोई Operation Perform करना है और Accessible Resource के पूरी तरह से Web Browser में Download हो जाने के बाद हम holdReady() Method में Argument के रूप में false मान Specify करके, ready() Event को Fire होने के लिए Release कर सकते हैं। साथ ही पिछले Example में दोनों holdReady() Statements के बीच जहां हमने alert() Method को Specify किया है, वहां पर हमें उस Resource को Web Browser में Download करने से सम्बंधित Codes लिखने होते हैं, जिसकी जरूरत jQuery के ready() Event Handler को है।
ये Article इस वेबसाईट पर Selling हेतु उपलब्ध EBook jQuery in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी।
jQuery in Hindi | Page:711 | Format: PDF
