javascript 防止从延迟加载的图像中恢复内容

Posted 2021-05-03

<img
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAdCAQAAACOVc0yAAAAIUlEQVR42mP8X89AIWAcNWLUiFEjRo0YNWLUiFEjqGIEACuLK2TjPdqqAAAAAElFTkSuQmCC"
  :data-src="imageIntro"
  class="image-intro"
  alt=""
  width="335"
  height="294"
>

<script>
import prefetchImages from 'prefetch-image'

export default {
  data: function () {
    return {
      images: [
        require('assets/images/intro.jpg'),
        require('assets/images/question-1.jpg'),
        require('assets/images/question-2.jpg'),
        require('assets/images/question-3.jpg')
      ]
    }
  },
  
  mounted: function () {
    this.prefetchAllImages()
  },

  methods: {
    prefetchAllImages() {
      prefetchImages(this.images)
        .then(() => {
          const imageIntro = document.querySelector('.image-intro')
          imageIntro.src = imageIntro.dataset.src
        })
    },
  }