diff --git a/README.md b/README.md index 772cc49..c0d5384 100644 --- 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 `` tags to the `` 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 index 743a671..669beb4 100644 --- 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 index e8354b1..edb5e2c 100644 --- 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