vuejs : как предварительно загрузить изображение внутри компонента

vuejs : как предварительно загрузить изображение внутри компонента

10.12.2018 01:02:35 Просмотров 35 Источник

У меня есть изображения внутри компонента, которые не отображаются при запуске. Когда я показываю свой компонент, мои изображения не отображаются мгновенно, а загружаются.

Я хотел бы предварительно загрузить свои изображения в корневое приложение, чтобы они мгновенно отображались, когда компонент активен.

Как бы ты это сделал?

У вопроса есть решение - Посмотреть?

Ответы - vuejs : как предварительно загрузить изображение внутри компонента / vuejs : how to preload image inside a component

Является ответом!
Vigikaran

10.12.2018 02:04:52

компоненты привязываются к dom только при их создании. изображения будут загружены только тогда, когда dom отправит запрос. вы можете попробовать что-нибудь

let image = new Image(); 
image.src = 'something.png'. 

это вызовет сетевой запрос. вы можете использовать переменную image в качестве реквизита для компонента

Orlandster

29.03.2019 11:34:18

Вы также можете сделать это с css

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

Если у вас есть много изображений, вы также можете написать простой плагин webpack, который генерирует этот код динамически.

https://stackoverflow.com/questions/53703285/vuejs-how-to-preload-image-inside-a-component/55425128#comment100028780_55425128
Это позволит предварительно загрузить изображения, даже если они не нужны во время рендеринга DOM, а не предпочтительным способом
dud3

06.01.2020 04:23:54

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

<div id="app">
  <div class="img-box">
    <img v-show="bgImg.show" :src="bgImg.src">
  </div>
</div>

var app = new Vue({
  el: '#app',
  data: {
    bgImg: {
    src: '/statics/popupbigbg2-min.png',
    show: false
   }
  },
  mounted: function () {
    var that = this
    this.preloadImage(this.bgImg.src).then(function() {
      that.bgImg.show = true
    })
  },
  methods: {
    function preloadImage (src) {
      return new Promise((resolve, reject) => {
        var img = new Image()

        img.onload = function() {
          console.log('img loaded')
          resolve()
        }

        img.src = src
      })
    }
})
...
Закрыть X