From 4b1d6708d03f8c3a57b03240b36847da37d4e485 Mon Sep 17 00:00:00 2001
From: Ben Pate <ben@pate.org>
Date: Tue, 12 Jan 2021 19:21:09 -0700
Subject: [PATCH] Handle preloaded resources

Updates to preload now preload any linked images included in the fragment html.  Stylesheets and scripts are not affected.
---
 src/ext/preload.js                | 20 ++++++++++++--------
 test/manual/preload-fragment.html | 11 ++++++++++-
 www/extensions/preload.md         |  3 +++
 3 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/ext/preload.js b/src/ext/preload.js
index 46355d2f..73a93d42 100644
--- a/src/ext/preload.js
+++ b/src/ext/preload.js
@@ -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;
 				}
diff --git a/test/manual/preload-fragment.html b/test/manual/preload-fragment.html
index 9d07aa0d..83dba8fb 100644
--- a/test/manual/preload-fragment.html
+++ b/test/manual/preload-fragment.html
@@ -1 +1,10 @@
-111
\ No newline at end of file
+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>
\ No newline at end of file
diff --git a/www/extensions/preload.md b/www/extensions/preload.md
index ca67d41d..0a6d0fa2 100644
--- a/www/extensions/preload.md
+++ b/www/extensions/preload.md
@@ -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.