Jquery 加载后显示图像

我正在寻找解决我的想法，即在加载图像后在网站上显示图像。当它们没有加载时，我想隐藏它们，但在它们应该放置的地方留下一个空闲空间

我需要在加载图像时显示它们，因为现在它们加载的方式很糟糕

我试过这样的方法：

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

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

Css通过以下方式提供不透明度动画：

img{
   transitions: all 2s;
}

---

我正在搜索其他解决方案，但没有找到任何有趣的解决方案，谢谢大家的帮助。

首先使用CSS将不透明度设置为0，然后使用jquery将不透明度设置为1或使用jquery show或fadeIn

styles.css

  img{
      opacity: 0;
  }

scripts.js

  $( document ).ready(function() {
      $('img').css('opacity' , '1');
      // $('img').show("slow");
      // $('img').fadeIn("slow");
  });

---

首先，它应该是

转换

，而不是

转换

如果希望在页面加载时隐藏图像，请不要等待document.ready事件将不透明度设置为零。在CSS中设置此选项

如果您使用的jQuery版本大于3（应该是），则需要使用

.on（）

绑定已加载的事件处理程序

$（'img'）。在（'load'，function（）上{
$（this.css（'opacity'，'1'）；
});
img{
不透明度：0；
过渡：所有2；
}

你所说的“不好看的方式”是什么意思？你能提供一些截图吗？我有大约20张图片，它们在不同的时间加载的时间都很长，这对我来说是“不好的”。我想看到平滑出现后，它是完全加载图像。现在，图像正在“逐行”加载类似于打印图像的内容。
transition
而不是
transitions
。另外，如果您使用的是最新版本的jQuery，那么它应该是
$（'img'）。在（'load'，function（）{…}）
doc.ready可以在图像加载之前启动。使用图像加载事件的OPs方法更合适。我按照您的建议做了，但存在一些问题。当我第一次访问该网站时（或当我强制谷歌Chrome通过Ctrl+Shift+R重新加载文件时），图像会在页面上漂亮地显示，但当我再次访问该网站时（或当我使用F5刷新时），图像保持透明（显示它们的代码不会启动）。我修改了如下代码：
$（'img'）.on（'load'，function（）{$（this）.css（'opacity'，'1'）；console.log（'working！'）；}）
和firs时间日志显示在console中，下一次在我强制重新加载（Ctrl+Shift+R）之前不会有日志，这是由于从缓存加载的图像造成的。这里有一些解决方案：这里有：