如何检查图像是否加载并将其设置为克隆模板的背景图像

Question

我有一个 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 link 中的图像是否已加载时，问题就开始了，如果没有 - 设置一些默认图像。首先，我尝试执行以下操作（而不是 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 方法中的默认图像，即使 URL data.poster 做了 return 图像。

为什么会发生这种情况以及如何使其发挥作用？

Answer 1

在异步加载事件处理程序之前保存海报元素。似乎克隆元素在加载图像时超出范围

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>

如何检查图像是否加载并将其设置为克隆模板的背景图像

How to check if image loads and set it as background-image of a cloned template

javascript

templates