bkwld / vue-media-loader-directive

Vue Directive preloads media depending on pixel density and viewport size

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 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]')

vue-media-loader-directive's Issues

Fire an event on loaded

Incorporate `background-position` data from Decoy

if the element is a <div>, set the admin selected background-position, if any.

What about adding a "loading" class

@thelucre what do you think about adding a class before loading starts so you could easily add global rules to set to opacity:0 until it's loaded, for instance.

Should Decoy pass a the width of the crop so the breakpoint can be dynamic?

Like if we're doing this in Decoy:

$visual->withDefaultImage(814, 534)

Would we want to break to the high at 814? Or is that an inaccurate assumption ... and is it fair that low should be 814/2? ...

vm var getting destroyed causing fatal errors

I think this happens if user destroys the parent before the image loads.

From https://bkwld.codebasehq.com/projects/bkwld/tickets/561