如何检查图像是否加载并将其设置为克隆模板的背景图像
如何检查图像是否加载并将其设置为克隆模板的背景图像
提问于 2021-12-26 13:54:55
我有一个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方法中的默认图像，尽管data.poster中的URL确实返回了一个图像。
为什么会发生这种情况，以及如何使其发挥作用？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-12-26 14:13:06
在异步加载事件处理程序之前保存海报元素。在加载图像时，克隆元素似乎超出了范围。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70486989
复制相关文章
相似问题
腾讯云开发者
