Question

我在页面条目上的一些图像和文本上使用animate.css（FadeInDown）。在本地运行罚款，但在服务器上它根本不平滑，因为需要加载所有图像（不是大量文件大小，只有很多图像）。

问题： animate.css启动（在页面加载时），但图像加载了一半。我知道我可以'显示：无'图像并使用JS / LazyLoad显示图像一旦加载，但到那时animate.css已经触发。

所以我认为我需要： A.将animate.css延迟到完全加载/显示图像的时间或者没错，B。一旦你点击了一个页面的链接，它就不会进入下一页，直到所有内容都完全加载。

任何可以提供帮助的人？

animate.css

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

Answer 1

在jQuery中，您可以在加载$(document).ready()时使用DOM执行函数，并在加载所有其他内容时使用$(window).on("load", handler)执行函数，喜欢图像。

基本上，你可以使用这个：

$(window).on("load", function(){
    // '#yourElement' this is the id of the html element you want to animate.
    // you can also use any other selector as well.
    $('#yourElement').addClass('animated fadeInDown');
});

Answer 2

如果你想分别在每个图像上设置动画，当加载单个图像时你可以这样做：

$("img").one("load", function() {
   $(this).addClass('fadeInDown');
}).each(function() {
  if(this.complete) $(this).load();
});

仅在图像加载后触发css动画

2 个答案: