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
|
// ==========================================================================
// SVG sprite loading and caching
// This file should be at the top of the body to avoid a flash
// Usage: loadSprite('https://cdn.com/path/to/sprite.svg', 'sprite-id');
// The second argument is optional but prevents loading twice
// ==========================================================================
(function() {
window.loadSprite = function(url, id) {
if (typeof url !== "string") {
return;
}
var body = document.body;
var prefix = "cache-";
var hasId = typeof id === "string";
var isCached = false;
// Check for *actual* storage support
var cacheSupported = (function() {
if (!hasId) {
return false;
}
var test = '___test';
try {
localStorage.setItem(test, test);
localStorage.removeItem(test);
return true;
} catch (e) {
return false;
}
})();
function updateSprite(container, data) {
// Inject content
container.innerHTML = data;
// Inject the SVG to the body
body.insertBefore(container, body.childNodes[0]);
}
// Only load once
if (!hasId || document.querySelectorAll("#" + id).length === 0) {
// Create container
var container = document.createElement("div");
container.setAttribute("hidden", "");
if (hasId) {
container.setAttribute("id", id);
}
// Check in cache
if (cacheSupported) {
var cached = localStorage.getItem(prefix + id);
isCached = cached !== null;
if (isCached) {
var data = JSON.parse(cached);
updateSprite(container, data.content);
}
}
// ReSharper disable once InconsistentNaming
var xhr = new XMLHttpRequest();
// XHR for Chrome/Firefox/Opera/Safari
if ("withCredentials" in xhr) {
xhr.open("GET", url, true);
}
// Not supported
else {
return;
}
// Once loaded, inject to container and body
xhr.onload = function() {
if (cacheSupported) {
localStorage.setItem(prefix + id, JSON.stringify({
content: xhr.responseText
}));
}
updateSprite(container, xhr.responseText);
};
xhr.send();
}
}
})();
|
