如何在执行某些操作之前等待图像加载

Question

我无法掌握加载事件。

我将正在处理的网站图像的默认不透明度设置为0。我希望它们在完全加载时显示。为此，我需要能够在加载时启动指令，该指令不起作用：

$('img').on('load', function() {
  $(this).css('opacity', '1')
})

img {
  opacity: 0;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}

<img src="https://placeimg.com/640/480/any">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

我尝试过.load（）、. one（'load'，function（）{…}），也可以在带有'load'事件监听器的普通JS中使用。即使这样也不起作用：

$(document).ready(function() {
            $('img').on('load', function() {
                console.log('loaded')
            });
        });

Answer 1

如果尝试添加文档准备就绪，结果如何？>

$( document ).ready(function() {
   $('img').on('load', function() {
      $(this).css('opacity', '0')
   });
});

Answer 2

您在CSS中的;之后忘记了opacity:：