Многие люди, возможно, столкнулись с проблемой загрузки других файлов JS в JavaScript, но многие друзья могут не знать, как судить, был ли загружен файл JS, который мы хотим загрузить. Если мы не завершим нагрузку, мы не получим успех. В этой статье объясняется, как загрузить другие файлы JS в JS и выполнить функции обратного вызова после загрузки.
Мы можем динамически создать элемент <cript>, а затем загрузить скрипт, изменив его атрибут SRC, но как мы узнаем, что файл сценария был загружен? Потому что некоторые из наших функций должны выполняться после загрузки и вступления в силу сценария.
После поиска ресурсов в сети я обнаружил, что в браузере IE вы можете использовать OneReadyStateChange элемента <Script> для мониторинга изменения состояния загрузки и определить, загружается ли сценарий или завершен, оценив, загружается ли его готовая установка. Вместо IE браузеры вы можете использовать Onload, чтобы непосредственно определить, загружен ли сценарий.
Простой процесс реализации выглядит так:
// IE под: var script = document.createElement ("script"); script.setattribute ("type", "text/javascript"); script.onreadystatechange = function () {if (это. }} script.setattribute ("src", scripts [i]); // opera, ff, chrome и т. Д.: var script = document.createElement ("script"); script.setattribt ("type", "text/javascript"); успешно! ");} script.setattribute (" src ", scripts [i]);Принцип очень прост. Основываясь на этих двух простых принципах, мы внесли некоторые модификации, и я изменил их на две функции, а именно сценарии последовательной загрузки и параллельной загрузки.
При прохождении массива, содержащего несколько путей файла JS, функция последовательной загрузки начинается с первой загрузки файла скрипта. Каждый раз, когда он загружается успешно, будет загружен следующий файл скрипта. После того, как вся загрузка завершена, функция обратного вызова будет выполнена. Параллельная загрузка - это загрузка всех файлов сценариев с самого начала, то есть они начинаются с одной и той же точки, и когда вся загрузка завершена, выполняется функция обратного вызова.
После тестирования эти две функции совместимы со всеми текущими основными браузерами.
/*** Конкатенат загрузка указанного сценария* concatenate загрузка [асинхронно] загружается по одному, каждая загрузка завершается, следующая загружается* После завершения всей загрузки выполняется обратный вызов* @param array seriesloadscripts (scripts, callback) {if (typeof (scripts)! = "Object") var scripts = [scripts]; var head = document.getElementsbytagname ("head"). item (0) || Document.documentelement; var s = new Array (), last = scripts.length - 1, recursiveload = function (i) {// рекурсива s [i] = document.createElement ("script"); s [i] .setAttribute ("type", "text/javascript"); s [i] .onload = s [i] .onreadyStateChange = function () {// Прикреплять обработчики для всех браузеров if (!/*@cc_on!@*/0 || this.readystate == "Загружено" || this.readyState == "complete") {this.Onload = this.onreadySteChange = null; this.parentnode.removechild (это); if (i! = last) recursiveload (i + 1); else if (typeof (обратный вызов) == "function") callback (); }} s [i] .setAttribute ("src", scripts [i]); Head.AppendChild (s [i]); }; Recursiveload (0);} /*** Загрузите указанный сценарий параллельно* загружать параллельно [синхронно] в одно и то же время, независимо от того, завершена ли предыдущая нагрузка или нет, загрузите все напрямую* выполнить обратный вызов после завершения всех загрузки* @param array ParallelloadScripts (scripts, callback) {if (typeof (scripts)! = "Object") var scripts = [scripts]; var head = document.getElementsbytagname ("head"). item (0) || document.documentelement, s = new Array (), загрузка = 0; for (var i = 0; i <scripts.length; i ++) {s [i] = document.createElement ("script"); s [i] .setAttribute ("type", "text/javascript"); s [i] .onload = s [i] .onreadyStateChange = function () {// Прикреплять обработчики для всех браузеров if (!/*@cc_on!@*/0 || this.readystate == "Загружено" || this.readystate == "overse") {загрузка ++; this.onreadystatechange = null; this.parentnode.removechild (это); if (загрузка == scripts.length && typeof (обратный вызов) == "function") callback (); }}; s [i] .setattribute ("src", scripts [i]); Head.AppendChild (s [i]); }}Здесь тег <script> динамически вставляется в тег <Head> на странице, а элемент тега будет автоматически удален после загрузки.
Если вы осторожны, вы также обнаружите, что здесь используется метод, называемый условной компиляцией в качестве выражения (!/*@CC_ON!@*/0), чтобы определить, не является ли он браузером IE. Условное составление не является в центре внимания этой статьи. Если вы заинтересованы, вы можете искать соответствующие материалы для обучения.
Как использовать эти две функции: здесь мы объявляем переменную массива, которая содержит два удаленных файловых адреса JS (конечно, сценарий вызова <Script> Tag поддерживает Cross Domain):
var scripts = ["http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js", "http://wellstyled.com/files/jquery.debug/jquery.debug.js""цин. и плагин отладки jQuery // Затем вы можете использовать следующий метод для вызова и выполнения обратного вызова после успеха. seriesloadscripts (scripts, function () { / * debug = new $ .debug ({posto: {x: 'right', y: 'снизу'}, ширина: '480px', высота: '50%', itemdivider:' <hr> ', listdom:' all '});Функция, загруженная последовательно, используется здесь. Конечно, вы также можете использовать параллельные функции загрузки. Это можно использовать в соответствии с ситуацией. Рекомендуется, чтобы каждый следующий скрипт имел зависимость от предыдущего скрипта для использования последовательной загрузки, в противном случае использовать параллельное соединение, поскольку в принципе параллельное соединение быстрее, чем последовательное соединение.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.