Hi, example not working unless defining the image slot. i use: "vue": "^2.5.7", "vue-material": "beta",

So adding the image slot to the first transition it works well.

So I really love the vue clazy load, but I just tried it on Safari and got an error on your website:

https://matheusgrieger.github.io/vue-clazy-load/example/index.html

[Vue warn]: Error in nextTick: "ReferenceError: Can't find variable: IntersectionObserver"

found in

---> ClazyLoad

Hi. Thanks for great module!

I am running npm run build with vue-cli webpack template and got an error

ERROR in static/js/vendor.636071240149cb133e9f.js from UglifyJs
Unexpected token: punc (() [./~/vue-clazy-load/src/clazy-load.js:8,0][static/js/vendor.636071240149cb133e9f.js:33092,9]

Is it critical?

image loading works fine from desktop regardless of browser but when i tried it on mobile the clazy loader keeps on loading and the images are not loaded

I love this component! It's saved me a bunch of time.

Is the component's load event supposed to include the $event parameter?

I want to change the style of the component after the 'load' event fires (specifically, change the background image to the newly loaded img). But I can't access the $event parameter in my handler.

<clazy-load v-bind:src="item.thumbnail" v-on:load="myHandler(item.thumbnail)">
  <img :src="item.thumbnail" style="display:none"/>
  <div slot="placeholder">Loading...</div>
</clazy-load>

function myHandler(thumbnail, event) {
    event.target.style.backgroundImage = 'url(' + thumbnail + ')';
}

I'm new to Vue, so it's entirely possible that I'm missing something obvious.

Summary

This PR resolves #11 by adding a crossorigin prop that can be used to opt-in to CORS mode for the cross-origin image requests.

Example:

<clazy-load src="https://other-domain.com" crossorigin="anonymous">
  <img src="https://other-domain.com">
  <div class="preloader" slot="placeholder">
    Loading message
  </div>
</clazy-load>

This allows the lazily-loaded images to make cross-origin requests with CORS mode allowing them to be properly cached using a Workbox Service Worker cacheFirst strategy.

Other

I wasn’t sure if I needed to or not, but I ran npm run build and generated new files in the dist/ directory as well.

Any feedback is greatly appreciated, thank you! 😉

First off, thanks for this Vue plugin! 😄

I'm finding myself in a situation where I need to have the lazily-loaded images have an attribute of crossorigin="anonymous" because they are cross-origin images (e.g. CDN). It'd be great if this could be configured via a prop.

Something like:

props: {
  /**
   * CrossOrigin flag
   * @type {Boolean}
   */
  crossOrigin: {
    type: Boolean,
    default: false
  },
  /**
   * CrossOrigin setting ("Anonymous" | "Use Credentials")
   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-crossorigin
   * @type {String}
   */
  crossOriginType: {
    type: String,
    default: 'Anonymous'
  }  
}

Then when the image is constructed, use those values to add the crossorigin attribute if configured to do so.

let img = new Image

if (this.crossOrigin) {
  img.crossOrigin = this.crossOriginType
}

The problem I'm running into is that I'm using a Service Worker and it is trying to use a cacheFirst strategy to cache these cross-origin requests. All of my lazily loaded images don't get cached as they are coming back as opaque responses due to not setting the crossOrigin attribute on creation of those images.

Thanks again! 😉

As we prepare for the 1.0 release, I'd like to ask for help.

I'm still a begginner with TypeScript, but I want to make this component fully compatible with as much different setups as possible. So, if anyone could do me a little favor and give me a hand with declaring TypeScript types and definitions, I'll really appreciate it.

There's no need for an actual PR with all types and everything declared, as I want to learn how to do it, I'd love it if you could point me to some example or docs about it.

Thank you all for using Vue Clazy Load and contributing!