加载后显示图像

Question

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

我需要在加载图像时显示它们，因为现在它们以不好看的方式加载。

我尝试过这样的事情：

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

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

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

img{
   transitions: all 2s;
}

我正在寻找其他解决方案，但没有发现任何有趣的东西，谢谢大家的帮助。

Answer 1

首先用 CSS 将 opacity 设置为 0，然后用 jquery 将 opacity 设置为 1 或使用 jquery show 或 fadeIn。

styles.css

  img{
      opacity: 0;
  }

scripts.js

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

https://api.jquery.com/show
https://api.jquery.com/fadein

Answer 2

首先，它应该是transition 而不是transitions。

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

如果您使用的 jQuery 版本大于 3（您应该是），那么您需要使用 .on() 来绑定您加载的事件处理程序。

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

img {
  opacity: 0;
  transition: all 2s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<img src="https://placehold.it/1000x1000">