requjs लोड स्क्रिप्ट प्रगति

Question

एक बेवकूफ सवाल पूछने का जोखिम मैं इसे एक कोशिश दूंगा।

क्या आवश्यकताएं लोडिंग निर्भरता लोड करते समय प्रगति संकेतक प्रदर्शित करना संभव है?

उदाहरण के लिए:

require(['jquery'], function($) { 

    // Well, jQuery loaded in quite some time due to a low-speed connection 
    // 
    // Or maybe I wanted to show an overlay to prevent user of clicking on UI widgets until the load is complete 
}); 

मैं नहीं चाहता कि RequireJS स्रोत को संशोधित करने शुरू करने के लिए वहाँ कुछ प्लगइन जो मेरे गूगल खोज में दिखाई नहीं था अगर चाहते हैं।

आपकी सभी मदद के लिए धन्यवाद।

Answer 1

नहीं, यह संभव नहीं है। RequrieJs DOM में एक नया स्क्रिप्ट टैग बनाकर मॉड्यूल लोड करता है और लोड ईवेंट को सुनता है। स्टार्ट एंड एंड लोडिंग के बीच कोई अपडेट इवेंट नहीं है। तो यह आवश्यकता जेएस लेकिन डीओएम की सीमा नहीं है।

Answer 2

स्पिनर या प्रगति सूचक प्रदर्शित करना संभव है, लेकिन बार स्वयं ही नहीं। मैं requjs (वर्तमान में लोडिंग या निष्क्रिय) की स्थिति प्राप्त कर सकता हूं, लेकिन भारित/लोड किए गए% मॉड्यूल को लोड करने के लिए आवश्यक नहीं है, क्योंकि उनकी निर्भरता प्रत्येक मॉड्यूल लोड पर पार्स की जाती है, लेकिन शुरुआत में नहीं।

लेकिन, वैसे भी, कम से कम एक साधारण स्पिनर वाला पृष्ठ, खाली पृष्ठ की तुलना में बहुत बेहतर है, जबकि उपयोगकर्ता प्रतीक्षा करता है।

आवश्यकतानुसार कोई बदलाव आवश्यक नहीं है! तो ..

मान लें हम

require.config({...}) 
require(["app"], function() { 

// main entry point to your hugde app's code 
}); 

साथ फ़ाइल require.conf.js है और यह

<script data-main="require.conf" type="text/javascript" src="bower_components/requirejs/require.js"></script> 

यह मानक requirejs परिदृश्य है का उपयोग कर एचटीएमएल से भरी हुई है। के

<div id="requirejs-loading-panel"> 
    <div id="requirejs-loading-status"></div> 
    <div id="requirejs-loading-module-name"></div> 
</div> 

ठीक करने के लिए सूचक जोड़ते हैं, के requirejs के समारोह require.onResourceLoad बुलाया पकड़ने और सभी जादू की जरूरत को करने दें। इसे प्रत्येक मॉड्यूल लोड पर requjs द्वारा बुलाया जाएगा, जो पेड़ और अन्य सभी कर्मचारियों के साथ requjs के संदर्भ को पारित कर दिया जाएगा। हम पता लगाने के लिए संदर्भ का उपयोग करेंगे, क्या आवश्यकताएं कुछ लोड हो रही हैं या नहीं। मैंने इसे अनुसूचित टाइमर कॉल में किया था, क्योंकि ऑनसोर्सलोड() को केवल लोड होने के दौरान ही बुलाया जाता है, जब लोड होने पर नहीं किया जाता है। इस कोड को require.js.conf के लिए जोड़ा जा करने की जरूरत है:

require.onResourceLoad = function (context, map, depMaps) { 


    var loadingStatusEl = document.getElementById('requirejs-loading-status'), 
     loadingModuleNameEl = document.getElementById('requirejs-loading-module-name'); 
    var panel = document.getElementById('requirejs-loading-panel'); 

    if (loadingStatusEl && loadingModuleNameEl) { 


     if (!context) { // we well call onResourceLoad(false) by ourselves when requirejs is not loading anything => hide the indicator and exit 

      panel.style.display = "none"; 
      return; 
     } 

     panel.style.display = ""; // show indicator when any module is loaded and shedule requirejs status (loading/idle) check 
     clearTimeout(panel.ttimer); 
     panel.ttimer = setTimeout(function() { 


      var context = require.s.contexts._; 
      var inited = true; 
      for (name in context.registry) { 
       var m = context.registry[name]; 

       if (m.inited !== true) { 
        inited = false; 
        break; 
       } 

      } // here the "inited" variable will be true, if requirejs is "idle", false if "loading" 

      if (inited) { 
       require.onResourceLoad(false); // will fire if module loads in 400ms. TODO: reset this timer for slow module loading 
      } 

     }, 400) 
     if (map && map.name) { // we will add one dot ('.') and a currently loaded module name to the indicator 

      loadingStatusEl.innerHTML = loadingStatusEl.innerHTML += '.'; //add one more dot character 
      loadingModuleNameEl.innerHTML = map.name + (map.url ? ' at ' + map.url : ''); 
     } 
    } else { 


    } 


}; 

एक समस्या यह है: हम किसी भी तरह को समझ नहीं सकता कि कितना मॉड्यूल लोड करने के लिए की जरूरत है, तो हम लोड प्रगति की वास्तविक% की गणना नहीं कर सकते। लेकिन, कम से कम, हम यह पता लगा सकते हैं कि हम कुछ लोड कर रहे हैं या नहीं (और ईवेंट वर्तमान में मॉड्यूल नाम लोड कर रहे हैं) और इसे एक तंत्रिका उपयोगकर्ता को दिखाएं

Answer 3

v। 2.1.19 RequJS के पास onNodeCreated कॉन्फ़िगरेशन प्रॉपर्टी है। यदि आप इसे फ़ंक्शन असाइन करते हैं, तो उस फ़ंक्शन को प्रत्येक बार <script> तत्व मॉड्यूल लोड करने के लिए दस्तावेज़ में जोड़ा जाता है।

फ़ंक्शन node, config, moduleName, और url तर्क प्रदान किए जाएंगे। ईवेंट श्रोताओं को node से जोड़कर, आप यह पता लगा सकते हैं कि स्क्रिप्ट लोड होने पर या लोड होने में विफल रहा है।

अब आप पता लगा सकते हैं जब लोड हो रहा है प्रक्रिया शुरू होता है और बंद हो जाता है और उस जानकारी का उपयोग कर सकते हैं उपयोगकर्ताओं को सूचित करने के लिए:

require.config({ 
    /* ... paths, shims, etc. */ 
    onNodeCreated: function(node, config, moduleName, url) { 
    console.log('module ' + moduleName + ' is about to be loaded'); 

    node.addEventListener('load', function() { 
     console.log('module ' + moduleName + ' has been loaded'); 
    }); 

    node.addEventListener('error', function() { 
     console.log('module ' + moduleName + ' could not be loaded'); 
    }); 
    }, 
}); 

आईई < 9 के लिए आप घटना श्रोताओं संलग्न करने के लिए अतिरिक्त कोड की आवश्यकता होगी।

नोट: यह केवल RequJS द्वारा अनुरोधित मॉड्यूल के लिए काम करता है। प्लगइन्स (requjs/text और ऐसे) प्रत्येक अपनी लोडिंग तंत्र का उपयोग करते हैं और onNodeCreated को ट्रिगर नहीं करते हैं। कुछ ट्रिगर onXhr और onXhrComplete हालांकि, ताकि आप उन्हें भी संभाल कर सकते हैं:

require.config({ 
    /* ... paths, shims, etc. */ 
    config: { 
    text: { 
     onXhr: function(xhr, url) { 
     console.log('file ' + url + ' is about to be loaded'); 
     }, 
     onXhrComplete: function(xhr, url) { 
     console.log('file ' + url + ' has been loaded'); 
     } 
    } 
    } 
});