Question

我有一个动画在用户点击网页大约1秒钟后消失。但是，由于淡入的文本是白色的，因此需要在此之前加载背景图像。

鉴于我的一些用户可能连接速度较慢，我想延迟动画直到加载背景图片？

您对如何执行此操作有任何建议吗？

我在想，有可能创建一个只使用Document Ready函数创建动画类的JQuery脚本。

但是，我对此并不了解，因为到目前为止，我对Javascript的使用超出了在线教程的范围。

有人可以提供一个快速的JSfiddle，了解如何在图像加载后才启动动画吗？

Answer 1

如果有人正在寻找可解决此问题的普通JavaScript解决方案，则可以：

暂停CSS动画。
等待文档加载（包括背景图片）。
开始CSS动画。

例如：

CSS

.element {
animation-play-state: paused;
}

JS

function startAnimation() { 
document.querySelector('.element').style.animationPlayState = 'running';
}
window.addEventListener('load', startAnimation);

Answer 2

舒尔，只需等待图片加载，然后添加点击处理程序：

 $('<img/>').attr('src', 'http://picture.de/image.png').on('load', function() {//wait for the page load
   $(this).remove(); // prevent memory leaks as @benweet suggested

   $('body').css('background-image', 'url(http://picture.de/image.png)');//assign the bg image, bg is now ready:
   $(window).on("click",alert);//assign the eventlistener
 });

主要部分取自How can I check if a background image is loaded?

Answer 3

这里的一般概念是在js中创建一个图像，添加一个onload函数，然后将图像的src设置为您想要首先加载的图像。然后在onload函数中放置动画所做的任何内容。

＆＃13;

var img = new Image();
img.onload = function() {
  document.getElementById('div').classList.add('fadein');
}
img.src = "http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg";

＆＃13;

div {
  height: 100vh;
  background-image: url('http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg');
  background-size: cover;
  opacity: 0;
  transition: opacity .5s;
}

.fadein {
  opacity: 1;
}

＆＃13;

<div id="div"></div>

＆＃13;

Answer 4

＆＃13;

var image = new Image();
image.onload = function() {
  $('body').append('<img class="bg-img" src="' + image.src + '" </img>');
  $('.bg-img').fadeTo(1000, 1);
}

image.onerror = function() {
  console.error("Sorry! Cannot load image");
}
image.src = "http://placehold.it/800x500";

＆＃13;

.bg-img{
  width: 100vw;
  height: auto;
  opacity: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

在加载背景图像之前，如何使用JQuery延迟动画？

4 个答案: