jQuery Late Loader Plugin
Published - 2009-08-21 | 2min
Prelude
When enhancing dynamic pages (no matter the server side language behind), jQuery is more than helpful.
Especially since there’s loads of jQuery plugins out there, saving so much time and effort.
When using javascripts in reoccurring user controls, controlling the added javascripts and css files from the server language is possible (to prevent duplicate loading), but in many cases adds bloated and hard to maintain code.
Keeping the includes only in the markup is easier to maintain (IMHO), however might cause unneeded http requests to your scripts and css files, especially if you have a page with multiple reoccurring user controls.
The Plugin
This plugin will allow you to include scripts ands css files dynamically, with success and failure callbacks.
Usage
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
90
91
92
93
94
95
96
97
98
99
100
101
|
$.LateLoader =
{
LoadScriptOrCSS:
/*
Loads a javascript/css from the passed url if it wasn't previously loaded
The parameter can either be a string with the wanted url( then the default
params are used (See Defaults for more details)), or an option object
URL -> relative or absolute URL to your javascript/css
*/
IsScriptOrCSSLoaded:
/*
Returns true|false if a javascript/css is already loaded
(via LoadScriptOrCSS)
Parameters :
URL-> relative or absolute URL to your javascript/css
Type->'js' or 'css' (defaults to 'js')
*/
GetLoadedScriptOrCSSs:
/*
Returns an array of all loaded scripts (object with 2 arrays, css and js)
*/
GetLoadedScriptOrCSSsByType:
/*
Returns an array of all loaded scripts/css according to the passed type
Parameter :
Type->'js' or 'css'
*/
PluginDefaults:
{
ArrayDataKey: "LateLoaderDataKey",
//Unique key used to identify the jQuery Data collection
ElementToAttachDataTo: "body",
//DOM object that hosts the jQuery Data collection
RemoteTimeout: 1500
//MS of timeout to wait for a remote script..
},
Defaults:
{
URL: **null**,
//Will be filled in by LoadScriptOrCSS's parameter
Type: 'js',
// 'js' or 'css' (defaults to 'js')
LoadedCallBackFunction: **null**,
// Called when the javascript/css is loaded (default is null)
ErrorCallBackFunction: **null**
// Called when an error occurs (default is null)
}
}
|
Where can you get it?
Main project page | Sample Page | Wiki | Source
What’s missing in it?
Detecting remote css files that are missing are so far only supported in IE
The plugin should scan the existing scripts / links includes as well as the data loaded by the plugin
Got suggestions?
I’d love to hear any feedback!
Enjoy,
Erik