q-img preloading
-
Hi, is there a way to preload all q-imgs on a page (even if they’re not displayed)?
-
how do you preload an image when it is displayed?
-
@dobbel My problem is that the q-imgs lag the screen (on phone) when they first appear (I’m using a lot of colourful icons in svg format).
I want to force-preload all q-imgs so they start loading immediately when the app starts.
-
@walfin You should be lazy-loading your images and in place, use QSkeleton until the image is available. If you load all your images at once, the time delay before the first screen is available will be horrendous.
-
@Hawkeye64 I was wondering if there was a way to start loading the images immediately after first paint (in the background). Currently the first opening of my menu sidebar is lagging as it only starts loading the images when the menu is opened. I’m currently resorting to using img instead of q-img and putting in invisible imgs elsewhere on the page to force the images to load.
-
@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 thatq-imgoften 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 haveDisable cachein Chrome DevTools unchecked.Additionally, I’ve found that adding
basicandno-default-spinnerto theq-imgelement can make it show up faster – from the API doc: https://quasar.dev/vue-components/img#qimg-apiI still see some lags, but that’s the best I could come up with.
