2011-03-30 21 views
33

यहपृष्ठ लोड होने के बाद लोड स्क्रिप्ट?

<script type="text/javascript" src="somescript.js"></script> 

जैसे कुछ स्क्रिप्ट लोड करने का जब शेष पृष्ठ लोड होने के संभव है?

कल्पना कीजिए कि मेरे पास कुछ बड़ी स्क्रिप्ट फ़ाइलें हैं जिनके लिए पृष्ठ लोड होने पर इसकी आवश्यकता नहीं है। जैसे मैं Google मानचित्र API का उपयोग कर रहा हूं जिसका उपयोग केवल तब किया जाता है जब कोई बटन क्लिक किया जाता है (इसलिए पेज लोड पर नहीं)।

क्या मेरे सिर में उन सभी स्क्रिप्ट टैग को प्रोसेस करने से पहले, शेष पृष्ठ को पहले लोड करना संभव है?

+0

अगर वे सिर में सूचीबद्ध हैं, लेकिन यदि आप Yepnope {http://yepnopejs.com/} जैसे कुछ उपयोग करते हैं, तो आप उन्हें केवल तभी लोड कर सकते हैं जब आपको उनकी आवश्यकता हो। – idbentley

उत्तर

33

JQuery में आप दस्तावेज़ तैयार

$.getScript("somescript.js", function(){ 
    alert("Script loaded and executed."); 
}); 
+0

मैंने एक उपयोगी काम सीखा है !!! – Miron

0

jQuery के getScript विधि का उपयोग पर कर सकते थे do this! या इस स्क्रिप्ट को पृष्ठ के अंत में रखने की कोशिश करें?

1

हां, कोड से जावास्क्रिप्ट फ़ाइलों को गतिशील रूप से इंजेक्शन करके यह संभव है। ऐसे कई पुस्तकालय हैं जिनका आप उपयोग कर सकते हैं: RequireJS, HeadJS आदि हाल ही में मुझे this दस्तावेज़ मिला जो बहुत से जावास्क्रिप्ट लोडर पुस्तकालयों की तुलना करता है।

0

हाँ, यह पूरी तरह से संभव है। onLoad="foo();" ईवेंट को अपने <body> टैग पर जोड़ें और इसे अपनी स्क्रिप्ट का आह्वान करें। आपको अपने बाहरी जेएस को फ़ंक्शन में लपेटने की आवश्यकता होगी और कुछ ऐसा करें:

//EXTERNAL JS (jsstuff.js) 

function Mojo() { 
    document.getElementById('snacks').style.visibility = "visible"; 
    alert("we are victorious!"); 
} 

//YOUR HTML 

<html> 
    <head> 
     <script type='text/javascript'></script> 
    </head> 
    <body onLoad='Mojo();'> 
     <div id='snacks'> 
      <img src='bigdarnimage.png'> 
     </div> 
    </body> 
</html> 
11

यह संभव है। मैं एक AJAX गहन साइट में एक ही चीज़ कर रहा था, लेकिन मैं Google चार्ट एपीआई लोड कर रहा था। पृष्ठ पर एक बटन क्लिक होने पर मैं Google चार्ट एपीआई लोड करने के लिए उपयोग किया गया कोड यहां दिया गया है।

function loadGoogleChartsAPI() { 
    var script = document.createElement("script"); 
    // This script has a callback function that will run when the script has 
    // finished loading. 
    script.src = "http://www.google.com/jsapi?callback=loadGraphs"; 
    script.type = "text/javascript"; 
    document.getElementsByTagName("head")[0].appendChild(script); 
} 

function loadGraphs() { 
    // Add callback function here. 
} 

यह एक कॉलबैक फ़ंक्शन का उपयोग करता है जो स्क्रिप्ट लोड होने पर चलाएगा।

+0

मानचित्र करता है: https://developers.google.com/loader/ –

6

कोई भी इन का उल्लेख नहीं किया?

$(window).load(function(){ 
    // do something 
}); 

या

$(window).bind("load", function() { 
    // do something 
}); 
6

बस आप defer पैरामीटर

<script src="pathToJs" defer></script> 

आप के रूप में अच्छी this सवाल

+1

नहीं, यह गलत है।'Async' पैरामीटर निर्दिष्ट करता है कि स्क्रिप्ट को तैयार होने पर निष्पादित किया जाता है, इस पर ध्यान दिए बिना कि पृष्ठ कितना दूर है। 'defer' शायद वह है जिसे आप ढूंढ रहे हैं। –

+0

फिक्स @AlexHolsgrove – nikoss

3
$(document).ready(function() { 
    var ss = document.createElement("script"); 
    ss.src = "somescript.js"; 
    ss.type = "text/javascript"; 
    document.getElementsByTagName("head")[0].appendChild(ss); 
}); 
+0

एसओ में आपका स्वागत है :) आपके द्वारा पोस्ट किए जा रहे कोड को स्पष्टीकरण जोड़ने के लिए हमेशा बेहतर होता है, ताकि यह आगंतुकों को यह समझने में सहायता करे कि यह एक अच्छा जवाब क्यों है। – abarisone

-1

करने के लिए जाँच कर सकते हैं कि स्क्रिप्ट फ़ाइल में जोड़ सकते हैं बस अपनी स्क्रिप्ट लोड होने से पहले पेज के लोगों को दिखाए async विशेषता का उपयोग:

<script src="//url/to/script.js" async></script> 

ब्राउज़र में लोड हो रहा है स्पिनर छुपाने के लिए, पेज समाप्त लोड हो रहा है के बाद स्क्रिप्ट टैग संलग्न:

<script> 
document.addEventListener('DOMContentLoaded', function() { 
    var script = document.createElement('script'); 
    script.src = '//url/to/script.js'; 
    document.getElementsByTagName('body')[0].appendChild(script); 
}); 
</script> 
नहीं
संबंधित मुद्दे