5

I'm using vuejs with Element UI, I want to show loading indicator when begin load image from src attr, hide loading indicator when load event(img loaded) trigger.

The load event works well, but loadstart never fire.

Here is snippet:

<div v-loading="imgLoading">
  <img
    :src="imgOfSelectedColor"
    @loadstart="showImgLoading"
    @load="hideImgLoading"
    @error="hideImgLoading"
    @abort="hideImgLoading"
  >
</div>
export default {
  data() {
    return {
      imgLoading: false
    };
  },
  methods: {
    showImgLoading() {
      this.imgLoading = true;
    },
    hideImgLoading() {
      this.imgLoading = false;
    }
  }
}
6
  • 1
    loadstart only applies to video and audio tags, it is not a valid event for img tags. See supported tags section w3schools.com/jsref/event_onloadstart.asp Apr 12, 2019 at 3:31
  • @AlexanderStaroselsky Is there an alternative for img ?
    – huang
    Apr 12, 2019 at 3:56
  • 1
    @AlexanderStaroselsky that's not true. ProgressEvents apply to a bunch of APIs, they were even originally implemented for XHR objects. And HTMLImageElement should fire the loadstart event as the 11th step of updating-the-image-data algorithm. Now, only Firefox among common browsers implemented this part of the specs, so ifeng, which browser did you test this from?
    – Kaiido
    Apr 12, 2019 at 3:56
  • @Kaiido Chrome 73.0.3683.103 x64.
    – huang
    Apr 12, 2019 at 3:59
  • 1
    Will be hard (if not impossible) to correctly polyfill this. I guess the best is to make your voice so that this 4 yrs old bug-report finally get treated.
    – Kaiido
    Apr 12, 2019 at 4:10

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.