itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-09-29 22:11:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Handle preloaded resources

Browse Source 
Updates to preload now preload any linked images included in the fragment html.  Stylesheets and scripts are not affected.
This commit is contained in:
Ben Pate 2021-01-12 19:21:09 -07:00
parent cb56604e05
commit 4b1d6708d0
3 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/ext/preload.js
View File

@ -23,6 +23,14 @@ htmx.defineExtension("preload", {
// preloading an htmx resource (this sends the same HTTP headers as a regular htmx request)
var load = function(node) {
// This is used after a successful AJAX request, to mark the
// content as loaded (and prevent additional AJAX calls.)
var handleResponse = function(responseText) {
node.preloadState = "DONE"
var ghost = document.createElement("div") // populate a "ghost" node
ghost.innerHTML = responseText // to preload images, too.
}
return function() {
// If this value has already been loaded, then do not try again.
@ -30,18 +38,14 @@ htmx.defineExtension("preload", {
return;
}
// This is used after a successful AJAX request, to mark the
// content as loaded (and prevent additional AJAX calls.)
var done = function() {
node.preloadState = "DONE"
}
// Special handling for HX-GET - use built-in htmx.ajax function
// so that headers match other htmx requests, then set
// node.preloadState = TRUE so that requests are not duplicated
// in the future
if (node.getAttribute("hx-get")) {
htmx.ajax("GET", node.getAttribute("hx-get"), {handler:done});
htmx.ajax("GET", node.getAttribute("hx-get"), {handler:function(elt, info) {
handleResponse(info.xhr.responseText);
}});
return;
}
@ -51,7 +55,7 @@ htmx.defineExtension("preload", {
if (node.getAttribute("href")) {
var r = new XMLHttpRequest();
r.open("GET", node.getAttribute("href"));
r.onload = done;
r.onload = function() {handleResponse(r.responseText);};
r.send();
return;
}

11
test/manual/preload-fragment.html
View File

@ -1 +1,10 @@
111
111
<script src="script.js"></script>
<img src="/images/image.gif">
<img src="/images/image.png">
<img src="/images/image.jpg">
<style href="stylsheet-from-style.css"></style>
<link rel="stylesheet" href="stylesheet-from-link.css">
<script>
alert("oops")
</script>

3
www/extensions/preload.md
View File

@ -38,6 +38,9 @@ You can add the `preload` attribute to the top-level element that contains sever
</ul>
```
### Preloading of Linked Resources
After an HTML page (or page fragment) is preloaded, this extension parses it as a DOM element, but does not add the new DOM node into your document. This is done so that any images included in the preloaded HTML via `<img>` tags are also preloaded. This extension does not load or run linked Javascript or Cascading Stylesheet content, whether linked or embedded in the preloaded HTML.
### Configuration
Defaults for this extension are chosen to balance users' perceived performance with potential load on your servers from unused requests. As a developer, you can modify two settings to customize this behavior to your specific use cases.