Código de JavaScript - Cargar un archivo JS o CSS en segundo plano, y controlar cuando ha terminado de cargarse en la pagina

Imágen de perfil

Cargar un archivo JS o CSS en segundo plano, y controlar cuando ha terminado de cargarse en la paginagráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 28 de Febrero del 2017 por xve
1.275 visualizaciones desde el 28 de Febrero del 2017. Una media de 21 por semana
Este código muestra como cargar un archivo JS o CSS en nuestra página de manera asyncrona, pudiendo controlar cuando termina de cargarse en la página.

Versión 1.0
estrellaestrellaestrellaestrellaestrella(2)

Actualizado el 30 de Marzo del 2017 (Publicado el 28 de Febrero del 2017)gráfica de visualizaciones de la versión: Versión 1.0
1.276 visualizaciones desde el 28 de Febrero del 2017. Una media de 21 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html>
<head>
 
 
</head>
<body>
 
Contenido de la pagina
 
</body>
 
<script>
/**
 * Funcion que carga el archivo JS o CSS utilizando XMLHttpRequest
 * Tiene que recibir:
 *    la url del archivo js o css
 *    la funcion a llamar cuando se haya cargado el contenido
 */
function getContent(url, callBackFunction)
{
    try
    {
        // creamos el objeto XMLHttpRequest
        var asyncRequest = new XMLHttpRequest();
 
        // registramos cualquier evento
        asyncRequest.onreadystatechange = function()
        {
            // Si develve "Done" (4) o ok (200)
            if (asyncRequest.readyState==4 && asyncRequest.status==200)
            {
                // mamamos a la funcion pasada por parametro enviando el contenido
                // del archivo descargado
                callBackFunction(asyncRequest.responseText);
            }
        }
 
        // Preparamos la peticion
        asyncRequest.open('GET', url, true);
 
        // enviamos la petición
        asyncRequest.send(null);
    }
    catch(exception)
    {
        alert('Fallo en la peticion');
    }
}
 
// Llamamos a la funcion getContent pasando como parametro el archivo JS a
// abrir y la funcion que tiene que ejecutar una vez se haya cargado el archivo
getContent("/js/miArchivo.js",function (code) {
 
    // Creamos un nuevo elemento <script>
    var s = document.createElement('script');
 
    // añadimos dentro del <script> el contenido descargado
    s.innerHTML=code;
 
    // Lo añadimos encima del primer <script> de la pagina
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
 
    /** EN ESTE PUNTO EL ARCHIVO YA SE HA CARGADO, Y PODEMOS GESTIONAR CUALQUIER
        EVENTO O FUNCION **/
});
 
 
// Llamamos a la funcion getContent pasando como parametro el archivo CSS a
// abrir y la funcion que tiene que ejecutar una vez se haya cargado el archivo
getContent("/css/miArchivo.css",function (code) {
 
    // Creamos un nuevo elemento <style>
    var s = document.createElement('style');
 
    // añadimos dentro del <style> el contenido descargado
    s.innerHTML=code;
 
    // Lo añadimos encima del primer <script> de la pagina
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
 
    /** EN ESTE PUNTO EL ARCHIVO YA SE HA CARGADO, Y PODEMOS GESTIONAR CUALQUIER
        EVENTO O FUNCION **/
});
</script>
 
</html>



Comentarios sobre la versión: Versión 1.0 (2)

Imágen de perfil
kip
28 de Febrero del 2017
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Imágen de perfil
ScriptShow
01 de Marzo del 2017
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder

Comentar la versión: Versión 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s3883  
Revisar política de publicidad