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，但没有明显效果）。您可以通过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 （这是因为只有最后一项被褪色）。

Answer 2

我认为这与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';
});

无法在其onload处理程序中更改图像的不透明度

2 个答案:

更新