Проблема с v-if. Как определить что картинка уже загружена? Почему происходит повторная загрузка картинки?

Question

[jeruthadam]

Для лейзи лоада картинки я использую такое

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

Все ок, за исключением странного поведения - при последующих вызовах этой функции загрузка картинки происходит еще раз, несмотря на то что она уже загружена браузером. Как предотвратить такое действие? Кроме простановки втупую флага, что картинка уже загружена.

апд Вообщем, с флагом все равно загружается повторно иногда



апд 2. Нашел из-за чего проблема. Этот элемент у меня с директивой v-if. Наводя на этот элемент с картинкой я его вставляю в дом и убираю обратно. Но по какой-то причине один раз из 50 таких наводов мышкой картинка грузится повтоно.

Comments

[dollar]

А без javascript один раз грузится?

[Владимир]

Галочка "Не использовать кеш" в дев тулзах не включена ?

[jeruthadam]

Владимир, включена) Но я думал это распространается только на сессию, т.е. в рамках одной сессии кеш работает. Сейчас проверю с отключенной)

[jeruthadam]

Владимир, проверил, все равно грузит

[jeruthadam]

Нашел проблему. Это происходит из-за того что я удаляю и вставляю этот элемент с картинкой из дома прежде чем его показать. Испольуя v-if Vue.js. По какой-то причине иногда, один раз из 20-40, происходит повторная загрузка. Похоже на баг какой-то вообще (иначе почему не каждый раз, а один из 50?)

Answer 1

[Николай Конюхов]

Возможно первый запрос с типом OPTIONS - браузер его отправляет для проверки доступности последующего GET запроса у сервера (т.н. preflight). Возможно вам нужно настроить сервер для отправки 204 и пустого ответа на данные запросы а-ля:

if ($request_method = 'OPTIONS') {
    return 204;
}

Comments

[jeruthadam]

Это происходит 1 раз из 50, а не каждый раз. В вашем случае эта повторная загрузка происходила бы каждый раз.

[Николай Конюхов]

jeruthadam, откуда ж я мог знать, что это не каждый раз)

[jeruthadam]

Николай Конюхов,

при последующих вызовах этой функции загрузка картинки происходит еще раз, несмотря на то что она уже загружена браузером