NEOZERATUL EN LA RED

Bueno pues no se si a alguno de ustedes les ha surgido el problema de que su sistema esta demasiado cargado al inicio de archivos javascript y css que realmente solo lo utilizan ciertos módulos, pues a mi hace unos meses me surgió ese problema e investigando me puse a trabajar en una libreria que cargara los archivos Javascript mediante el DOM simplemente llamando a un método. La libreria fue basada en este artículo de Sentido Web y en este otro de phpied. El código es el siguiente:

1. var ScriptLoader = {

2. //Método a llamar para cargar el script

3. loadScript: function(file,opt) {

5. if(typeof opt!=“object”) opt = {};

6. if(opt.id==undefined) opt.id = “js_”+file;

8. id=opt.id;

9. var head = document.getElementsByTagName(‘head’).item(0)

10. var scriptTag = document.getElementById(id);

12. //Si no se quiere cache se genera un número aleatorio

13. if(opt.cache==false){

14. var milisegundos = new Date().getTime().toString();

15. if(file.indexOf(“?”)!=-1) file = file+“&”;

16. else file = file+“?”;

18. file = file+milisegundos;

19. }

21. if(scriptTag) return;

23. script = document.createElement(’script’);

24. script.src = file;

25. script.type = ‘text/javascript’;

26. script.id = id;

27. head.appendChild(script);

29. //Para IE

30. script.onreadystatechange = function () {

31. if (script.readyState == ‘complete’) {

32. if(typeof opt.oncomplete == “function”) {

33. opt.oncomplete();

34. }

35. }

36. }

37. //Para Firefox

38. script.onload = function () {

39. if(typeof opt.oncomplete == “function”) {

40. opt.oncomplete();

41. }

42. }

44. return;

45. },

46. unloadScript: function(id){

47. var head = document.getElementsByTagName(‘head’).item(0)

48. var scriptTag = document.getElementById(id);

49. if(scriptTag) head.removeChild(scriptTag);

50. return;

51. },

52. loadCSS:function(file,opt){

53. if(opt==null) opt = {};

54. if(opt.id==undefined) opt.id = “css_”+file;

55. id=opt.id;

57. var head = document.getElementsByTagName(‘head’).item(0)

58. var scriptTag = document.getElementById(id);

60. if(scriptTag) return;

61. //Si no se quiere cache se genera un número aleatorio

62. if(opt.cache==false){

63. var milisegundos = new Date().getTime().toString();

64. if(file.indexOf(“?”)!=-1) file = file+“&”;

65. else file = file+“?”;

67. file = file+milisegundos;

68. }

69. css = document.createElement(‘link’);

70. css.rel = ’stylesheet’;

71. css.href = file;

72. css.type = ‘text/css’;

73. css.id = id;

74. head.appendChild(css)

75. return;

76. },

77. unloadCSS:function(id){

78. var head = document.getElementsByTagName(‘head’).item(0)

79. var scriptTag = document.getElementById(id);

80. if(scriptTag) head.removeChild(scriptTag);

81. return;

82. }

83. }

La forma de uso es simple, solo incluyen el archivo scriptloader.js al principio de su página

<script src=“http://ruta/a/scriptloader.js” type=“text/javascript”></script>

Y para incluir el archivo se llama de la siguiente forma:

ScriptLoader.loadScript(“http://ruta/al/archivo.js”,{cache:false, oncomplete: function(){alert(‘Probando carga de archivo’)}});
Los parámetros son opcionales y pueden ser los siguientes:

• id: especifica una id para el archivo, si se deja nulo el script le asigna una id del tipo js_archivo
• cache: true o false. Si se especifíca en false la libreria le asignara un ?random al final de manera que el archivo siempre se renueve al momento de cargar la pá
• onComplete: esto nos permite indicarle algun evento al momento de que el script se cargue en su totalidad

De la misma manera para incluir un archivo CSS es necesario escribir:

ScriptLoader.loadCSS(“http://ruta/al/archivo.css”);

Bueno pues espero que les sirva este aporte (no pretendo reinventar el hilo negro).

FUENTE: www.webadictos.com.mx