为透明图像设置回退的最佳方法是什么?

z9zf31ra  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(222)

目前,在加载映像时,我正在使用20px的回退映像。问题在于透明图像。加载后,它们的背景图像看起来很模糊。使用主色或跟踪svg会以不同的方式导致相同的问题。那么,我怎样才能在没有这些副作用的情况下为他们使用回退映像呢?
一种解决方案是在加载时删除背景。但这是一个好的解决方案吗?
一个更好的解决方案可能是只移除透明图像的背景。是否有任何方法可以使用node js检测图像是否透明?所以,我只能对这些图像采取行动。
我正在使用gatbsy js和gatsby remark relative images插件来自动化图像优化过程。但是没有必要用盖茨比API来回答这个问题。

eivgtgni

eivgtgni1#

在javascript中有一个 load 事件侦听器,您的最佳选择可能是为每个“img”元素设置一个事件侦听器,以删除回退,

document.querySelectorAll('.loaded-img').forEach(elm => {
   elm.addEventListener('load', (event) => {
      event.target.previousElementSibling.remove() // This is generally bad practice IMO, 
      //here I'm assuming the fallback img is right before the actual img but for 
      //consistency may want to do something like 
      //event.target.parentElement.querySelector('.fallback-img').remove()
      //Could also just add a forwards animation to opacity 1 -> 1;
   }, { once:true }) // Only runs once per Image.
})

或者可以像这样向父级添加事件侦听器,

document.querySelector('.img-parent').addEventListener('load', (event) => {
   if (event.target.classList == 'image-class') // ... Same as above
})

相关问题