The problem with v-if. How to determine that the picture is already loaded? Why re-download images?

For lazy load of images I use this

mouseEnterHandler () {
 let img = new Image()
 img.src = this.image
 img.onload = () => {
 this.show = true
}
 }


Everything is OK except for a strange behavior on subsequent calls to this function, download the picture occurs again, despite the fact that it is already loaded by the browser. How to prevent such action? In addition to placing vtupuyu flag that the picture is already loaded.

the ADF in General, with the flag still reload sometimes

5c989e3953677230865841.png

ADF 2. Found what the problem is. This element I to Directive v-if. Making this element with the picture I put it in and take it back. But for some reason, one time out of 50 such nevodov the mouse the picture is loaded, Pocono.
March 19th 20 at 08:26
1 answer
March 19th 20 at 08:28
Perhaps the first query type OPTIONS - the browser sends to check the availability of the subsequent GET request on the server (so-called preflight). Maybe you need to configure the server to send a 204 and empty response to these queries, a La:
if ($request_method = 'OPTIONS') {
 return 204;
}
This happens 1 time out of 50, but not every time. In your case, this reloads would occur every time. - Mylene.Schust commented on March 19th 20 at 08:31
@Mylene.Schust, whence I could know that it is not every time) - Alessandra16 commented on March 19th 20 at 08:34
@Alessandra16,
on subsequent calls to this function, download the picture occurs again, despite the fact that it is already loaded by browser
- Mylene.Schust commented on March 19th 20 at 08:37

Find more questions by tags Vue.jsJavaScript