https://subs.springwise.com/JavaScript/mootools/more/Utilities/Assets.js

1/*
2---
3
4script: Assets.js
5
6name: Assets
7
8description: Provides methods to dynamically load JavaScript, CSS, and Image files into the document.
9
10license: MIT-style license
11
12authors:
13  - Valerio Proietti
14
15requires:
16  - Core/Element.Event
17  - MooTools.More
18
19provides: [Assets]
20
21...
22*/
23
24var Asset = {
25
26	javascript: function(source, properties){
27		if (!properties) properties = {};
28
29		var script = new Element('script', {src: source, type: 'text/javascript'}),
30			doc = properties.document || document,
31			load = properties.onload || properties.onLoad;
32
33		delete properties.onload;
34		delete properties.onLoad;
35		delete properties.document;
36
37		if (load){
38			if (!script.addEventListener){
39				script.addEvent('readystatechange', function(){
40					if (['loaded', 'complete'].contains(this.readyState)) load.call(this);
41				});
42			} else {
43				script.addEvent('load', load);
44			}
45		}
46
47		return script.set(properties).inject(doc.head);
48	},
49
50	css: function(source, properties){
51		if (!properties) properties = {};
52
53		var load = properties.onload || properties.onLoad,
54			doc = properties.document || document,
55			timeout = properties.timeout || 3000;
56
57		['onload', 'onLoad', 'document'].each(function(prop){
58			delete properties[prop];
59		});
60
61		var link = new Element('link', {
62			type: 'text/css',
63			rel: 'stylesheet',
64			media: 'screen',
65			href: source
66		}).setProperties(properties).inject(doc.head);
67
68		if (load){
69			// based on article at http://www.yearofmoo.com/2011/03/cross-browser-stylesheet-preloading.html
70			var loaded = false, retries = 0;
71			var check = function(){
72				var stylesheets = document.styleSheets;
73				for (var i = 0; i < stylesheets.length; i++){
74					var file = stylesheets[i];
75					var owner = file.ownerNode ? file.ownerNode : file.owningElement;
76					if (owner && owner == link){
77						loaded = true;
78						return load.call(link);
79					}
80				}
81				retries++;
82				if (!loaded && retries < timeout / 50) return setTimeout(check, 50);
83			}
84			setTimeout(check, 0);
85		}
86		return link;
87	},
88
89	image: function(source, properties){
90		if (!properties) properties = {};
91
92		var image = new Image(),
93			element = document.id(image) || new Element('img');
94
95		['load', 'abort', 'error'].each(function(name){
96			var type = 'on' + name,
97				cap = 'on' + name.capitalize(),
98				event = properties[type] || properties[cap] || function(){};
99
100			delete properties[cap];

101			delete properties[type];
102
103			image[type] = function(){
104				if (!image) return;
105				if (!element.parentNode){
106					element.width = image.width;
107					element.height = image.height;
108				}
109				image = image.onload = image.onabort = image.onerror = null;
110				event.delay(1, element, element);
111				element.fireEvent(name, element, 1);
112			};
113		});
114
115		image.src = element.src = source;
116		if (image && image.complete) image.onload.delay(1);
117		return element.set(properties);
118	},
119
120	images: function(sources, options){
121		sources = Array.from(sources);
122
123		var fn = function(){},
124			counter = 0;
125
126		options = Object.merge({
127			onComplete: fn,
128			onProgress: fn,
129			onError: fn,
130			properties: {}
131		}, options);
132
133		return new Elements(sources.map(function(source, index){
134			return Asset.image(source, Object.append(options.properties, {
135				onload: function(){
136					counter++;
137					options.onProgress.call(this, counter, index, source);
138					if (counter == sources.length) options.onComplete();
139				},
140				onerror: function(){
141					counter++;
142					options.onError.call(this, counter, index, source);
143					if (counter == sources.length) options.onComplete();
144				}
145			}));
146		}));
147	}
148
149};