@Hawkeye64 Like most technical questions in programming forums, this question can be answered in two ways:
Hey, what you are
trying to do (called X ) is not the recommended way. So, do Y instead. (An example of XY Problem –
https://xyproblem.info/)
Ok, let’s assume you know what you are doing and you have your own reasons to do X instead of the recommended way of Y. Here is the easiest way to achieve that.
I believe your answer was case #1 above. And there are people who are looking for #2. As a core Quasar Team member, it would be wonderful to hear your answer to #2.
What I have found is the common way of preloading in Javascript (https://stackoverflow.com/q/3646036 – just (new Image()).src = url;) does the work here. Note that q-img often loads the image twice (Read more details in my answer here: https://github.com/quasarframework/quasar/issues/7053#issuecomment-771938111), but the second time it’s from the cache. So if you want to test it, make sure you have Disable cache in Chrome DevTools unchecked.
Additionally, I’ve found that adding basic and no-default-spinner to the q-img element can make it show up faster – from the API doc: https://quasar.dev/vue-components/img#qimg-api
I still see some lags, but that’s the best I could come up with.