Add preload spinner
-
- create a styled re-usable Loader.js with the quasar Loading component…
more info: http://quasar-framework.org/components/loading.html
import {Loading} from 'quasar-framework' const Loader = { show : () => { Loading.show( { delay : 300, message : 'Loading...', messageColor : '#C86F51', spinner : 'tail', spinnerSize : 60, // in pixels spinnerColor : '#C86F51' } ) }, hide : () => { Loading.hide() } } export default Loader
- import Loader.js into your Vue component, and attach the methods…
<script> import Loader from '../common/Loader.js' ... export default { methods : { hideLoader () { Loader.hide() }, showLoader() { Loader.show() }, ...
- add “show” to the Component’s “created()” function…
... created() { this.showLoader() }, ...
- add “hide” to the template’s img tag load event.
more info about html events here :
http://www.quackit.com/html_5/tags/html_5_event_handler_content_attributes.cfm
<template> ... <div> <img @load="hideLoader()" class="responsive" :src="user.avatar"/> </div> ...
That’s about it.
I will do a quasar request for a preload spinner, specifically inside img tags.
Saves us some boiler code - create a styled re-usable Loader.js with the quasar Loading component…
-
Will do. Thanks for posting this.