97 lines
2.9 KiB
HTML
97 lines
2.9 KiB
HTML
|
<h1 id="load">Resource Loading</h1>
|
||
|
|
|
||
|
|
<div class="intro">
|
||
|
|
Speed up your site. Manage your library's dependencies. Load javascript and stylesheets in parallel but execute them in the correct order.
|
||
|
|
</div>
|
||
|
|
<div class="code-example" data-title="head.load()">
|
||
|
|
|
||
|
|
<p>Resource loading has many different options to cater to various needs</p>
|
||
|
|
|
||
|
|
{% highlight js %}
|
||
|
|
// queue scripts and fire a callback when loading is finished
|
||
|
|
head.load("file1.js", "file2.js", function() {
|
||
|
|
// do something
|
||
|
|
});
|
||
|
|
|
||
|
|
// same as above, but pass files in as an Array
|
||
|
|
head.load(["file1.js", "file2.js"], function() {
|
||
|
|
// do something
|
||
|
|
});
|
||
|
|
|
||
|
|
// you can also give scripts a name (label)
|
||
|
|
head.load({ label1: "file1.js" }, { label2: "file2.js" }, function() {
|
||
|
|
// do something
|
||
|
|
});
|
||
|
|
|
||
|
|
// same as above, but pass files in as an Array
|
||
|
|
head.load([{ label1: "file1.js" }, { label2: "file2.js" }], function() {
|
||
|
|
// do something
|
||
|
|
});
|
||
|
|
|
||
|
|
// Labels are usually used in conjuntion with: head.ready()
|
||
|
|
head.ready("label1", function() {
|
||
|
|
// do something
|
||
|
|
});
|
||
|
|
|
||
|
|
// Actually if no label is supplied, internally the filename is used for the label
|
||
|
|
head.ready("file1.js", function() {
|
||
|
|
// do something
|
||
|
|
});
|
||
|
|
{% endhighlight %}
|
||
|
|
|
||
|
|
<p>All the above examples also work with CSS files.</p>
|
||
|
|
|
||
|
|
{% highlight js %}
|
||
|
|
// queue scripts and fire a callback when loading is finished
|
||
|
|
head.load("file1.css", "file2.css");
|
||
|
|
|
||
|
|
// same as above, but pass files in as an Array
|
||
|
|
head.load(["file1.css", "file2.css"]);
|
||
|
|
{% endhighlight %}
|
||
|
|
|
||
|
|
<h2>Conditional Loading</h2>
|
||
|
|
<p>You can also run tests to load file A if a test succeeds, or fallback to file B. This is great for loading Polyfils, or loading dependencies when certain conditions are met.</p>
|
||
|
|
|
||
|
|
|
||
|
|
{% highlight js %}
|
||
|
|
// signature
|
||
|
|
head.test(condition, success, failure, callback);
|
||
|
|
|
||
|
|
/*
|
||
|
|
condition: something that evaluates to true/false
|
||
|
|
success : a file, an array of files, a labeled object, an array of labeled objects
|
||
|
|
failure : a file, an array of files, a labeled object, an array of labeled objects
|
||
|
|
callback : a function to call when evaluation & loading is done
|
||
|
|
*/
|
||
|
|
|
||
|
|
|
||
|
|
// simplified version 1
|
||
|
|
head.test(condition, "success.js", "failure.js" , callback);
|
||
|
|
|
||
|
|
// simplified version 2
|
||
|
|
head.test(condition, ["success1.js", "success1.js"], "failure.js" , callback);
|
||
|
|
|
||
|
|
// object version
|
||
|
|
head.test({
|
||
|
|
test : bool,
|
||
|
|
success : ["file1.js", "file2.js"],
|
||
|
|
failure : ["poly1.js", "poly2.js"],
|
||
|
|
callback: function() {
|
||
|
|
// do stuff
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
// Example
|
||
|
|
head.test(head.mobile, "normal.js", "fallback.js", function() {
|
||
|
|
// do stuff
|
||
|
|
});
|
||
|
|
{% endhighlight %}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div style="width:100%;">
|
||
|
|
<div onclick="blog.loadComments(this, 'api/1.0.0/load', 'Leave a comment')" style="cursor: pointer;">
|
||
|
|
<h2>Show Comments</h2>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|