https://github.com/bkwld/vue-media-loader-directive

Vue Directive preloads media depending on pixel density and viewport size
https://github.com/bkwld/vue-media-loader-directive

Last synced: over 1 year ago
JSON representation

Vue Directive preloads media depending on pixel density and viewport size

• Host: GitHub
• URL: https://github.com/bkwld/vue-media-loader-directive
• Owner: BKWLD
• License: mit
• Created: 2016-01-19T18:16:58.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2016-04-09T00:33:21.000Z (over 10 years ago)
• Last Synced: 2025-02-26T22:40:57.801Z (over 1 year ago)
• Language: CoffeeScript
• Size: 13.7 KB
• Stars: 1
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Vue Media Loader Directive

Loads  or background image with multiple sources, depending on

the viewport width. Use the `:media` attribute to pass in an obj with keys

`low`, `medium`, and `high` image sources.

Once the image is loaded, if will be set on the element and a class of

`media-loaded` will be added.

You would use this package instead of, say, 

[PictureFill](https://github.com/scottjehl/picturefill) because there is a

single API for dealing with both `img` tags and css background images.

*Usage:*

* Register the directive globally

	`Vue.directive 'media-loader', require 'vue-media-loader-directive'`

* Single image source string. Just add this to any element you want to load

	`v-media-loader='/img/temp-project-marquee-low.png'`

* Bundle of media sizes. Should be a JS object with keys `low`, `medium`, `high`

	`img(v-if='marquee' v-media-loader :media='[YOUR_OBJECT_REFERENCE]')`