Подвисание анимации при загрузке контента.
Я верстаю одностраничный сайт, это не лендинг, просто умещаю весь контент разных страниц на одной с анимированными переходами и т. п. Делаю это с помощью фреймворка Vue. В принципе, раотает неплохо, но вот если переходить на страницу с непрогруженным контентом (картинки\видео и .т. п), то анимация может глючить. Можно ли это как-то исправить?
Я думаю сделать как-нибудь задержку прогрузки контента, но не знаю как это можно реализовать, буду очень признателен, если подскажете.
сам сайт - http://featherdesign.realnost.club/# (недоделанный)
Реализовать очень просто: слушаешь событие 'load' буферного объекта (создаваемого в DOM без append'а), и в его обработчике меняешь стейт (моментально выводя уже кэшированный браузером контент).
Например, если представить компонент-обертку img с src в пропсах:
watch: {
src(newSrc) {
if (!this.ready) return;
this.ready = false;
this.bufImg.src = newSrc;
}
},
created() {
this.bufImg = document.createElement('img'); // or new Image()
this.bufImg.addEventListener('load', () => {
this.$refs.img.src = this.bufImg.src;
this.ready = true;
});
}
Вместо ready конечно лучше использовать отмену загрузки, если код меняет src не дождавшись ее. Это только общий набросок принципа предоада с единичным элементом, который нужно индивидуально развивать под каждую задачу (скажем, можно добавить заглушку-спиннер, или плавную смену картинок через фейд-анимацию). Вот при рендеринге img через v-for, код будет основан уже не на компоненте-обертке, а на объекте с массивом и связью с воркером, например - это уже посложнее.
Сама суть решения, это работа с кэшем браузера, и неважно как она будет организована.