Merge pull request #76 from BKWLD/support-preload

weotch · web-flow · commit dc20a63a2596 · 2023-11-14T19:58:32.000-08:00
add support to image preload
diff --git a/README.md b/README.md
@@ -66,9 +66,11 @@ A list of the [component properties](http://vuejs.org/v2/guide/components.html#P
 
 #### Loading
 
+- `preload (boolean)` - Requires Nuxt framework.  If `true` will add `<link rel="preload"/>` tags to the `<head>` for the image assets.
+
 - `autoload (boolean)` - *Default: `true`.*  If `true`, assets are loaded immediately unless `lazyload`.
 
-- `lazyload (boolean)` - Waits until the Visual enters the viewport to trigger loading.  Overrides, `autoload`.
+- `lazyload (boolean)` - Waits until the Visual enters the viewport to trigger loading.  Overrides `autoload`.
 
 - `intersection-options (object)` - IntersectionObserver options. Used with `lazyload` and `autopause`.
 
diff --git a/concerns/supports-images.coffee b/concerns/supports-images.coffee
@@ -7,6 +7,27 @@ export default
 		srcset: String
 		webpSrcset: String
 		sizes: String
+		preload: Boolean
+
+	# Add preload link tags
+	head: ->
+		return unless @preload and @image
+
+		# Create base link attributes
+		preloadTag =
+			rel: 'preload'
+			as: 'image'
+			href: @image
+
+		# Add srcset support
+		if imagesrcset = @webpSrcset || @srcset
+		then preloadTag = Object.assign preloadTag, {
+			imagesrcset
+			imagesizes: @sizes || '' # Prevent "undefined" value
+		}
+
+		# Add link tag
+		return link: [ preloadTag ]
 
 	computed:
 
@@ -22,4 +43,3 @@ export default
 
 			# Image has finished loading
 			when @imageLoaded then true
-
diff --git a/index.js b/index.js
@@ -624,7 +624,36 @@ Logic related rendering images
     image: String,
     srcset: String,
     webpSrcset: String,
-    sizes: String
+    sizes: String,
+    preload: Boolean
+  },
+  // Add preload link tags
+  head: function head() {
+    var imagesrcset, preloadTag;
+
+    if (!(this.preload && this.image)) {
+      return;
+    } // Create base link attributes
+
+
+    preloadTag = {
+      rel: 'preload',
+      as: 'image',
+      href: this.image
+    }; // Add srcset support
+
+    if (imagesrcset = this.webpSrcset || this.srcset) {
+      preloadTag = Object.assign(preloadTag, {
+        imagesrcset: imagesrcset,
+        imagesizes: this.sizes || '' // Prevent "undefined" value
+
+      });
+    }
+
+    return {
+      // Add link tag
+      link: [preloadTag]
+    };
   },
   computed: {
     // Determines whether the image should be shown via v-show
