我有一点JavaScript:
function performSearch(keywords) {
const itemList = document.getElementById('items-div');
const search = document.getElementById('search');
itemList.innerHTML = '';
setLoading(true);
store.where({ name: keywords }).then((items) => {
setLoading(false);
console.log(`Found ${items.length} items...`);
items.forEach((c, i) => {
console.log(c);
if (c.imageUrl) {
itemList.innerHTML += rowTemplate({
card: c,
index: i,
});
const img = document.getElementById(`image-${i}`);
img.onload = () => {
img.style.transition = "opacity 0.3s";
img.style.opacity = "1";
console.log(`Image ${i} loaded succesfully.`);
};
img.src = c.imageUrl;
}
});
search.focus();
search.select();
});
}
似乎不起作用的是img.onload
部分。
控制台中显示console.log()
消息,但不透明度不会改变。
如果我在控制台本身做同样的事情,它可以正常工作。
我意识到这一定是因为DOM没有完成呈现我正在添加的东西,但我不知道如何修复它。
答案 0 :(得分:2)
因为您需要在加载时指定启动器opacity
(默认为1
,并且您尝试从1
转换为1
,但没有明显效果)。您可以通过fade-in
获得@keyframes
效果,这是一个示例:
const onload = () => {
const img = document.getElementById('target');
img.style.opacity = 0;
img.style.animation = "fadeIn .5s ease-in 1 forwards";
};
onload();
@keyframes fadeIn {
to {
opacity: 1;
}
}
<img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" id="target">
“这种显示我的意思:jsfiddle.net/92w79gxa/3 ...在这个例子中,我默认显示所有图像,但后来尝试使它们全部消失。仅最后一个消失了。“
您需要在img.onload
:img = document.getElementById('some-image-${i}');
内分配新值。以下是工作示例:
const stuff = document.getElementById("stuff");
stuff.innerHTML = '';
console.log('started');
for(let i = 0; i <= 5; i++) {
stuff.innerHTML += `
<img style="opacity: 1" id="some-image-${i}" width="20" height="20"><br>
`;
let img = document.getElementById(`some-image-${i}`);
console.log('BEFORE "onload"')
img.onload = () => {
console.log('INSIDE "onload"')
img = document.getElementById(`some-image-${i}`);
img.style.transition = 'opacity 2s';
img.style.opacity = '0';
};
img.src = 'http://synic.world/s/someicon.png';
}
console.log('Done!');
<div id="stuff">
</div>
如果您将查看控制台日志,您将看到所有迭代都是第一次,并且只有在最后一次完成之后,所有onload
都将被执行,最后存储的项目将是{{1 (这是因为只有最后一项被褪色)。
答案 1 :(得分:1)
我认为这与for循环的范围有关。您的JSFiddle示例仅淡化最后一个图像。我用lodash来确保范围是正确的。
https://jsfiddle.net/92w79gxa/4/
const stuff = document.getElementById("stuff");
stuff.innerHTML = '';
_.each(_.range(5), i => {
stuff.innerHTML += `
<img style="opacity: 1" id="some-image-${i}" width="20" height="20"><br>
`;
})
const images = document.getElementsByTagName('img');
_.each(images, (img, i) => {
img.onload = () => {
img.style.transition = 'opacity 2s';
img.style.opacity = '0';
console.log(`Loaded image ${i}`);
console.log(img);
};
img.src = 'http://synic.world/s/someicon.png';
});