Ox.getFile: refactor, fix IE css/js onload, handle errors, don't always append ?random in dev version; add Ox.getImage, Ox.getScript and Ox.getStylesheet (extension check is unreliable, google api js doesn't end in '.js', '...#.js' is ugly)
This commit is contained in:
rolux
parent
9554d22fa8
commit
ca388e9adc
1 changed files with 127 additions and 10 deletions
|
|
@ -83,16 +83,7 @@ Ox.getAsync = function(urls, get, callback) {
|
|||
urls.some(Ox.isArray) ? getSerial() : getParallel();
|
||||
};
|
||||
|
||||
/*@
|
||||
Ox.getFile <f> Loads a file (image, script or stylesheet)
|
||||
(file, callback) -> <u> undefined
|
||||
file <s|a> Local path or remote URL, or array of those, or array of arrays
|
||||
Multiple files in the same array will be processed simultaneously, but
|
||||
multiple arrays of files will be processed in that order.
|
||||
callback <f> Callback function
|
||||
image <h> DOM element (if the file is an image)
|
||||
@*/
|
||||
// FIXME: this doesn't handle errors yet
|
||||
/*
|
||||
Ox.getFile = (function() {
|
||||
|
||||
var cache = {};
|
||||
|
|
@ -121,6 +112,11 @@ Ox.getFile = (function() {
|
|||
element.type = type == 'css' ? 'text/css' : 'text/javascript';
|
||||
if (type == 'css') {
|
||||
element.rel = 'stylesheet';
|
||||
waitForCSS()
|
||||
} else {
|
||||
element.onload = element.onreadystatechange = function() {
|
||||
|
||||
};
|
||||
}
|
||||
if (/MSIE/.test(navigator.userAgent)) {
|
||||
// fixme: find a way to check
|
||||
|
|
@ -183,6 +179,127 @@ Ox.getFile = (function() {
|
|||
}, callback);
|
||||
};
|
||||
|
||||
}());
|
||||
*/
|
||||
|
||||
(function() {
|
||||
|
||||
var cache = {},
|
||||
head = document.head
|
||||
|| document.getElementsByTagName('head')[0]
|
||||
|| document.documentElement;
|
||||
|
||||
function getFile(type, url, callback) {
|
||||
var element, tagValue, typeValue, urlKey;
|
||||
if (!cache[url]) {
|
||||
if (!type) {
|
||||
type = url.split('.').pop();
|
||||
type = type == 'css' ? 'stylesheet'
|
||||
: type == 'js' ? 'script' : 'image';
|
||||
}
|
||||
if (type == 'image') {
|
||||
element = new Image();
|
||||
element.onerror = onError;
|
||||
element.onload = onLoad;
|
||||
element.src = url;
|
||||
} else {
|
||||
tagValue = type == 'script' ? 'script' : 'link';
|
||||
typeValue = type == 'script' ? 'text/javascript' : 'text/css';
|
||||
urlKey = type == 'script' ? 'src' : 'href';
|
||||
if (Ox.some(
|
||||
document.getElementsByTagName(tagValue),
|
||||
function(element) {
|
||||
return element[urlKey] == url;
|
||||
}
|
||||
)) {
|
||||
onLoad();
|
||||
} else {
|
||||
element = document.createElement(tagValue);
|
||||
element.onerror = onError;
|
||||
element.onload = element.onreadystatechange = onLoad;
|
||||
element.type = typeValue;
|
||||
element[urlKey] = url;
|
||||
if (type == 'stylesheet') {
|
||||
element.rel = 'stylesheet';
|
||||
}
|
||||
head.appendChild(element);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
callback(cache[url], null);
|
||||
}
|
||||
function onError() {
|
||||
callback(null, {code: 404, text: 'Not Found'});
|
||||
}
|
||||
function onLoad() {
|
||||
if (
|
||||
!this || !this.readyState
|
||||
|| this.readyState == 'loaded' || this.readyState == 'complete'
|
||||
) {
|
||||
// for an image, keep a reference to the element
|
||||
// to keep the image in the browser cache
|
||||
cache[url] = type == 'image' ? this : true;
|
||||
callback(cache[url], null);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getFiles(type, urls, callback) {
|
||||
Ox.getAsync(urls, function(url, callback) {
|
||||
getFile(type, url, callback);
|
||||
}, callback);
|
||||
}
|
||||
|
||||
/*@
|
||||
Ox.getFile <f> Loads a file (image, script or stylesheet)
|
||||
(file, callback) -> <u> undefined
|
||||
file <s|a> Local path or remote URL, or array of those, or array of such arrays
|
||||
Multiple files in the same array will be processed simultaneously,
|
||||
but multiple arrays of files will be processed in that order.
|
||||
callback <f> Callback function
|
||||
image <h> DOM element (if the file is an image)
|
||||
@*/
|
||||
Ox.getFile = function(url, callback) {
|
||||
getFiles(null, url, callback);
|
||||
};
|
||||
|
||||
/*@
|
||||
Ox.getImage <f> Loads an image
|
||||
(file, callback) -> <u> undefined
|
||||
file <s|a> Local path or remote URL, or array of those, or array of such arrays
|
||||
Multiple files in the same array will be processed simultaneously,
|
||||
but multiple arrays of files will be processed in that order.
|
||||
callback <f> Callback function
|
||||
image <h> DOM element
|
||||
@*/
|
||||
Ox.getImage = function(url, callback) {
|
||||
getFiles('image', url, callback);
|
||||
};
|
||||
|
||||
/*@
|
||||
Ox.getScript <f> Loads a script
|
||||
(file, callback) -> <u> undefined
|
||||
file <s|a> Local path or remote URL, or array of those, or array of such arrays
|
||||
Multiple files in the same array will be processed simultaneously,
|
||||
but multiple arrays of files will be processed in that order.
|
||||
callback <f> Callback function
|
||||
@*/
|
||||
Ox.getScript = function() {
|
||||
getFiles('script', url, callback);
|
||||
};
|
||||
|
||||
/*@
|
||||
Ox.getStylesheet <f> Loads a stylesheet
|
||||
(file, callback) -> <u> undefined
|
||||
file <s|a> Local path or remote URL, or array of those, or array of such arrays
|
||||
Multiple files in the same array will be processed simultaneously,
|
||||
but multiple arrays of files will be processed in that order.
|
||||
callback <f> Callback function
|
||||
@*/
|
||||
Ox.getStylesheet = function() {
|
||||
getFiles('stylesheet', url, callback);
|
||||
};
|
||||
|
||||
}());
|
||||
|
||||
/*@
|
||||
|
|
|
|||
Loading…
Reference in a new issue