如何檢查影像是否加載并將其設定為克隆模板的背景影像

我有一個 HTML 模板，我正在呼叫一些 API 并收到一個物件串列

我在所有物件上回圈運行，并為每個物件創建模板的克隆：

const data = [{
  id: 'someid',
  poster: 'some_image_url',
  url: 'some_link_url',
  title: 'Title',
  description: 'description'
}]
const construct = data => {
  const template = document.querySelector('#type1')
  const clone = template.content.cloneNode(true)
  clone.querySelector('a').setAttribute('href', data.url)
  clone.querySelector('.poster').setAttribute('style', `background-image: url("${data.poster}")`)
  clone.querySelector('.title').textContent = data.title
  clone.querySelector('.description').textContent = data.description
  return clone
}
data.forEach(data => document.body.appendChild(construct(data)))

<template id="type1">
  <div class='type1'>
    <a>
      <div class='poster'></div>
      <div class='content'>
        <div class='title'></div>
        <div class='description'></div>
      </div>
    </a>
  </div>
</template>

到目前為止一切正常。當我決定檢查poster鏈接中的影像是否已加載，如果沒有 - 設定一些默認影像時，問題就開始了。首先，我嘗試執行以下操作（而不是clone.querySelector('.poster')）：

const img = new Image
img.onload = function() {
  clone.querySelector('.poster').setAttribute('style', `background-image: url("${data.poster}")`)
}
img.onerror = function() {
  clone.querySelector('.poster').setAttribute('style', 'background-image: url("./assets/default.png")')
}
img.src = data.poster

我收到以下錯誤： clone.querySelector(...) is null

我嘗試使用閉包：

img.onload = (function (clone) {
  return function () {
    clone.querySelector('.poster').setAttribute('style', `background-image: url("${data.poster}")`)
  }
})(clone)
img.onerror = (function (clone) {
  return function () {
    clone.querySelector('.poster').setAttribute('style', 'background-image: url("./assets/default.png")')
  }
})(clone)

唉，同樣的結果，同樣的錯誤。

我也嘗試使用.apply(clone)上述方法，但是在這種情況下，所有影像都設定為onerror方法中的默認影像，即使 URLdata.poster確實回傳了影像。

為什么會發生這種情況以及如何使其發揮作用？

uj5u.com熱心網友回復：

在異步加載事件處理程式之前保存海報元素。似乎克隆元素在影像加載時超出范圍

const data = [{
  id: 'someid',
  poster: 'https://www.freecodecamp.org/news/content/images/2021/06/w-qjCHPZbeXCQ-unsplash.jpg',
  url: 'some_link_url',
  title: 'Title',
  description: 'description'
}]
const construct = data => {
  const template = document.querySelector('#type1')
  const clone = template.content.cloneNode(true)
  const poster = clone.querySelector('.poster')
  const img = new Image()
  
  img.onload = function() { 
    poster.setAttribute('style', `background-image: url("${data.poster}")`)
    console.log(poster.style.backgroundImage)
  }
  img.onerror = function() {
    poster.setAttribute('style', 'background-image: url("./assets/default.png")')
  }
  img.src = data.poster

  clone.querySelector('a').setAttribute('href', data.url)
  clone.querySelector('.title').textContent = data.title
  clone.querySelector('.description').textContent = data.description
  return clone
}
data.forEach(data => document.body.appendChild(construct(data)))

.poster { height: 100px; width: 100px ; }

<template id="type1">
  <div class='type1'>
    <a>
      <div class='poster'></div>
      <div class='content'>
        <div class='title'></div>
        <div class='description'></div>
      </div>
    </a>
  </div>
</template>

標籤：javascript 模板

上一篇：在具有默認模板引數的函式模板上獲取具有自動推導回傳型別的指標

下一篇：在模板中使用不完整的模板型別