window.onload

Question

का उपयोग करने के लिए सबसे अच्छा अभ्यास मैं जूमला वेबसाइट/घटकों/मॉड्यूल और प्लगइन्स विकसित करता हूं और हर बार मुझे जावास्क्रिप्ट का उपयोग करने की क्षमता की आवश्यकता होती है जो पेज लोड होने पर किसी ईवेंट को ट्रिगर करता है। अधिकांश समय यह window.onload फ़ंक्शन का उपयोग करके किया जाता है।

मेरा प्रश्न है:

1. यह पेज लोड हो रहा है पर JavaScript की घटनाओं को गति प्रदान करने का सबसे अच्छा तरीका है या एक बेहतर/नए तरीका है?
2. यदि पृष्ठ लोडिंग पर किसी ईवेंट को ट्रिगर करने का यह एकमात्र तरीका है, तो यह सुनिश्चित करने का सबसे अच्छा तरीका क्या है कि विभिन्न स्क्रिप्ट द्वारा एकाधिक ईवेंट चलाए जा सकते हैं?

Answer 1

window.onload = function(){}; काम करता है, लेकिन जैसा कि आप ध्यान दिया होगा, यह आप केवल 1 श्रोता निर्दिष्ट करने के लिए अनुमति देता है।

मैं कहेंगे बेहतर/ऐसा करने का नया तरीका एक ढांचे का उपयोग किया जाएगा, या सिर्फ देशी addEventListener और attachEvent का एक सरल कार्यान्वयन का उपयोग करने के तरीके, जो आप करने की अनुमति देता हटाने (आईई के लिए) घटनाओं के लिए श्रोताओं के साथ ही। window.onload मामले उपयोग के लिए

// Cross-browser implementation of element.addEventListener() 
function listen(evnt, elem, func) { 
    if (elem.addEventListener) // W3C DOM 
     elem.addEventListener(evnt,func,false); 
    else if (elem.attachEvent) { // IE DOM 
     var r = elem.attachEvent("on"+evnt, func); 
     return r; 
    } 
    else window.alert('I\'m sorry Dave, I\'m afraid I can\'t do that.'); 
} 

// Use: listen("event name", elem, func); 

:

यहाँ एक क्रॉस-ब्राउज़र कार्यान्वयन है listen("load", window, function() { });

---

संपादित मैं कीमती जानकारी जोड़कर मेरा उत्तर का विस्तार करना चाहते हैं कि दूसरों द्वारा इंगित किया गया था।

यह DOMContentLoaded (वर्तमान में इस समर्थन मोज़िला, ओपेरा और वेबकिट nightlies) और onreadystatechange (आईई के लिए) घटनाओं जो दस्तावेज़ में लागू किया जा सकता वस्तु को समझने के लिए जब दस्तावेज है के बारे में है छेड़छाड़ करने के लिए उपलब्ध (सभी छवियों/स्टाइलशीट आदि के लिए प्रतीक्षा किए बिना .. लोड किया जा सकता है)।

इस के क्रॉस-ब्राउज़र समर्थन के लिए बहुत सारे "हैकी" कार्यान्वयन हैं, इसलिए मैं दृढ़ता से इस सुविधा के लिए एक ढांचे का उपयोग करने का सुझाव देता हूं।

Answer 2

आधुनिक जावास्क्रिप्ट ढांचे ने "दस्तावेज़ तैयार" घटना का विचार पेश किया है। यह एक ऐसी घटना है जो दस्तावेज तैयार करेगी जब दस्तावेज़ डीओएम मैनिप्लेशंस पर प्रदर्शन करने के लिए तैयार होगा। "ऑनलोड" घटना पृष्ठ पर सबकुछ लोड होने के बाद ही आग लगती है।

"दस्तावेज़ तैयार" घटना के साथ, ढांचे ने जावास्क्रिप्ट कोड के कई बिट्स कतार और ईवेंट को आग लगने पर चलाने के लिए एक तरीका प्रदान किया है।

तो, यदि आप ढांचे का विरोध कर रहे हैं, तो इसके बारे में जाने का सबसे अच्छा तरीका अपने दस्तावेज़ को लागू करना है। कतार कतार।

यदि आप ढांचे का विरोध नहीं कर रहे हैं, तो आप jQuery and document.ready, Prototype and dom:loaded, Dojo and addOnLoad या Google [अपने ढांचे] और "दस्तावेज़ तैयार" के लिए Google देखना चाहते हैं।

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

Answer 3

व्यक्तिगत रूप से, मैं this method पसंद करते हैं। इतना ही नहीं यह आप एक से अधिक onload कार्य करने की अनुमति है, लेकिन अगर कुछ स्क्रिप्ट में परिभाषित किया था इससे पहले कि आप इसे करने के लिए मिल गया है, इस पद्धति काफी अच्छा है कि ... समस्या सिर्फ छोड़ दिया संभाल करने के लिए है है अगर किसी पृष्ठ के लोड कई स्क्रिप्ट जो window.addLoad() फ़ंक्शन का उपयोग नहीं करता है; लेकिन यह उनकी समस्या है :)।

पीएस यदि आप बाद में अधिक कार्यों को "चेन" करना चाहते हैं तो यह भी बढ़िया है। MooTools साथ

Answer 4

जूमला जहाजों, ताकि आप इसे सबसे आसान अपने अतिरिक्त कोड के लिए MooTools पुस्तकालय का उपयोग करने के मिल जाएगा। MooTools जहाजों को एक कस्टम इवेंट के साथ जहाज़ कहा जाता है जिसे पृष्ठ लोड किया जाता है और दस्तावेज़ पेड़ को पार्स किया जाता है। MooTools के बारे में

window.addEvent(domready, function() { code to execute on load here }); 

अधिक जानकारी here पाया जा सकता है। Joomla 1.5 वर्तमान MT1.1 साथ जहाजों जूमला 1.6 अल्फा शामिल होंगे, जबकि MT1.2

Answer 5

window.onload घटनाओं कई कृतियों पर ओवरराइट कर रहे हैं। कार्यों को जोड़ने के लिए विंडो.addEventListener (W3C मानक) या window.attachEvent (IE के लिए) का उपयोग करें। काम करने वाले निम्नलिखित कोड का प्रयोग करें।

if (window.addEventListener) // W3C standard 
{ 
    window.addEventListener('load', myFunction, false); // NB **not** 'onload' 
} 
else if (window.attachEvent) // Microsoft 
{ 
    window.attachEvent('onload', myFunction); 
} 

Answer 6

यह गंदा लेकिन छोटे तरीका है: पी

function load(){ 
    *code* 
} 

window[ addEventListener ? 'addEventListener' : 'attachEvent' ] 
(addEventListener ? 'load' : 'onload', function(){}) 

Answer 7

के रूप में मैं हमेशा शामिल jQuery/दस्तावेज़ के तल पर जे एस फ़ाइलें बूटस्ट्रैप और दस्तावेज़ के ऊपर $ करने के लिए कोई acces है, मैं एक विकसित

window.init = new function() { 
    var list = []; 

    this.push = function(callback) { 
     if (typeof window.jQuery !== "undefined") { 
      callback(); 
     } else { 
      list.push(callback); 
     } 
    }; 

    this.run = function() { 

     if (typeof window.jQuery !== "undefined") { 
      for(var i in list) { 
       try { 
        list[i](); 
       } catch (ex) { 
        console.error(ex); 
       } 
      } 
      list = []; 
     } 
    }; 

    if (window.addEventListener) { 
     window.addEventListener("load", this.run, false); 
    } else if (window.attachEvent) { 
     window.attachEvent("onload", this.run); 
    } else { 
     if (window.onload && window.onload !== this.run) { 
      this.push(window.onload); 
     } 
     window.onload = this.run; 
    } 
}; 

इस का उपयोग करते हुए मैं jQuery एक से पहले, पेज पर किसी भी गुमनाम लोडर को परिभाषित कर सकते हैं: जो एक और केवल जे एस स्क्रिप्ट मैं अपने पृष्ठों के सबसे ऊपर पर शामिल है छोटे "init" प्लगइन d शामिल किए जाने bootstrap और यकीन है कि यह एक बार jQuery सक्रिय कर देगा रहने मौजूद है:

init.push(function() { 

    $('[name="date"]').datepicker({ 
     endDate: '0d', 
     format: 'yyyy-mm-dd', 
     autoclose: true 
    }).on('hide', function() { 
     // $.ajax 
    }); 

    $('[name="keyword_id"]').select2(); 
});