javascript - 在其 onload 处理程序中更改图像的不透明度时遇到问题

Question

我有这段 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 还没有完成我正在添加的内容的渲染，但我不确定如何修复它。

Answer 1

因为您需要在加载时指定启动器 opacity(默认情况下为 1，并且您正尝试从 1 过渡到 1 没有可见效果)。并且可以通过@keyframes实现fade-in效果，例子如下:

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 才会被执行，最后存储的元素将是.some-image-5(这是因为只有最后一项褪色了)。