Last active
May 14, 2017 05:47
-
-
Save sampotts/15adab33ff3af87f902db0253f0df8dd to your computer and use it in GitHub Desktop.
This will fetch a remote SVG sprite and then store in local storage meaning next time it is pulled from local storage while the XHR occurs, preventing the flash of no icons. It could obviously be extended to pull from local storage all the time based on a version of the SVG sprite.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ========================================================================== | |
// 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(); | |
} | |
} | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment