Nuxt应用中如何将图片预加载指令改写为组件方法实现

先明确核心逻辑的迁移本质 #

你之前用自定义指令能正常运行，本质是指令钩子会直接接收当前绑定的原生DOM元素作为入参，所有预加载操作都是直接在这个DOM上完成的。换成组件内实现不需要全局指令，只要用Vue的ref机制替代指令提供的DOM入参，完整复刻原有new Image的加载逻辑即可。

你之前在mounted中直接给this.src赋值没有效果的核心原因：混淆了Vue组件实例属性和原生DOM的属性，this.src只是给组件实例新增了一个普通JS变量，完全没有关联到页面上的img真实节点，自然不会有任何视觉变化。

两种可直接复用的实现方式 #

方式1：mounted钩子实现（适配静态渲染、无动态v-if控制的单图片场景） #

• 给目标img标签添加ref标识，替代原来自定义指令的DOM入参：

<img 
  ref="targetImg" 
  v-lazy="realImageUrl"
/>

• 在mounted生命周期中完整复刻原指令的预加载逻辑：

mounted() {
  // 引入本地占位图资源，和原指令绑定的资源路径保持一致
  const placeholderUrl = require('@/assets/local-loading-placeholder.png')
  // 新建Image实例做占位图预加载，完全保留原有逻辑
  const preloadImage = new Image()
  preloadImage.onload = () => {
    // 非空判断避免DOM不存在时报错
    if (this.$refs.targetImg) {
      // 占位图加载完成后，直接给真实DOM的src赋值占位地址
      this.$refs.targetImg.src = placeholderUrl
    }
  }
  // 触发占位图加载
  preloadImage.src = placeholderUrl
}

方式2：组件方法封装实现（适配动态v-if、多图片、循环渲染的全场景，和原指令灵活性完全对齐） #

这种方式完全可以覆盖你之前和v-if、v-lazy搭配使用的所有场景，不需要全局注册指令，直接在组件内部定义通用方法：

• 封装预加载通用方法，接收目标DOM元素、占位图地址两个参数：

methods: {
  runImgPreload(targetImgEl, placeholderUrl) {
    // DOM存在性校验
    if (!targetImgEl) return
    const preloadInstance = new Image()
    preloadInstance.onload = () => {
      targetImgEl.src = placeholderUrl
    }
    preloadInstance.src = placeholderUrl
  }
}

• 分场景触发预加载逻辑：
  • 对v-if控制渲染的动态img：在v-if条件触发、DOM渲染完成后的$nextTick中调用方法，避免DOM未生成时取到null

// 示例：当isImgShow条件变为true、img渲染完成后触发预加载
watch: {
  isImgShow(newVal) {
    if (newVal) {
      this.$nextTick(() => {
        const placeholderUrl = require('@/assets/local-loading-placeholder.png')
        this.runImgPreload(this.$refs.dynamicImg, placeholderUrl)
      })
    }
  }
}

• 对和v-lazy搭配的img：保持原有v-lazy的真实图片加载逻辑不变，预加载的占位图设置流程和原指令完全一致，不会和v-lazy的src赋值逻辑冲突——因为v-lazy触发真实图加载时，会直接覆盖当前img的src地址，符合预加载占位的效果预期。
• 对循环渲染的多img场景：给每个img绑定动态ref，在列表渲染完成后的$nextTick中批量获取DOM引用，循环调用预加载方法即可：

// 循环列表渲染完成后批量触发
this.$nextTick(() => {
  this.$refs.imgList.forEach(imgEl => {
    this.runImgPreload(imgEl, placeholderUrl)
  })
})

效果对齐的关键注意点 #

• 不要通过Vue响应式属性绑定img的src来设置占位图：这套new Image预加载逻辑本身是原生DOM操作，直接操作DOM的行为和原自定义指令的表现完全一致，走响应式绑定反而会触发额外的组件重渲染，偏离原有效果。
• 必须加DOM存在性判断：v-if的动态渲染、组件卸载都会导致$refs对应的DOM引用失效，不做判断会抛出DOM属性设置的运行时报错。

内容的提问来源于stack exchange，提问作者Ehrlich_Bachman