The embed code uses Lightning.js to load Clara safely and politely. However, if the Clara.io embed is the main focus of your web page, you can load it synchronously to speed up the scene loading. This mechanism has the following side effects:
exo
, THREE
, bootstrap, jQuery, et cetera.clara
function.First, add to your page:
<script src="https://clara.io/api/utils/div_embed_dependencies.js"></script>
This sets the global variable claraDivEmbedDependencies
. (api/utils/div_embed_dependencies) returns JSON if you prefer that).
Replace the embed code with:
var loadScript = function(src, callback) {
var script = document.createElement('script');
script.onload = callback;
script.src = src;
script.async = false;
document.head.appendChild(script);
};
(function() { var l = document.createElement('link'); l.href = claraDivEmbedDependencies.css; l.rel = "stylesheet"; document.head.appendChild(l); })();
claraDivEmbedDependencies.js.slice(0,-1).forEach(loadScript);
loadScript(claraDivEmbedDependencies.js.slice(-1)[0], function() {
var clara = divEmbed(window, document);
if (typeof jQuery !== 'undefined') jQuery.fn.clara = function(c,o) { return clara.jq(this,c,o); };
// you may now use the clara or $.clara functions.
});
$.clara
works the same as described in the jQuery plugin section of this document. However, the plain javascript function clara
works slightly differently.
Replace:
clara('init', {el: element, id: 'uuid', loadingImg: '/img/splash.jpg'}).then(function() {
alert('player started');
});
with:
clara.init({el: element, id: 'uuid', loadingImg: '/img/splash.jpg'});
alert('player started');