Question

我正在使用$（）。promise（）。then（）在加载图像源后启动动画。一切正常，但我不确定......这是正确的方法吗？是否有另一个jQuery构造在加载所有图像后运行动画？

警告

$（window）.load（）不起作用。我需要解决方案 - 回调，将在加载所有图像后触发。但在所有PROGRAMATICALLY加载图像后 - 见

丙（＆＃34; SRC＆＃34;＆＃34; http://lorempixel.com/320/180/business＆＃34）。

＆＃13;

$(function() {

  var options = {
                  step: function(now) {
                    $(this).css("filter", $(this).prop("id")+"("+now+"%)")
                  },
                  duration: 2000,
                  easing: "linear"
                },

      animate = function() {
                  $(this).animate({filter: "100%"}, options);
                }

  $("img[id]").each(function() {
    $(this)
      .prop("src", "http://lorempixel.com/320/180/business")
      .promise()
      .then(animate);
  })  
       
})

＆＃13;

:root {
  counter-reset: cntr;
  /* CSS variables - MS from Edge 15 */
  --h: 256;
  --s: 50%;
  --l: 100%;
}

ul {
  color: hsl(var(--h), var(--s), var(--l));
}

li:after {
  counter-increment: cntr;
  content: attr(data-text)" "counter(cntr);
}

figure {
  float: left;
  margin-bottom: 10px;
}

/* Filters - disabled. Done by animation
#sepia {
  filter: sepia(100%);
}

#grayscale {
  filter: grayscale(100%);
}

#invert {
  filter: invert(100%);
} */

＆＃13;

<!DOCTYPE html>

<meta charset="utf-8">
<title>New CSS features and "advanced" jQuery animation</title>

<ul>
   <li data-text='Item'>
   <li data-text='Item'>
   <li data-text='Item'>
   <li data-text='Item'>
   <li data-text='Item'>
   <li data-text='Item'>
</ul>

<figure>
  <figcaption>Sepia</figcaption>
  <img id="sepia" src="#">
</figure>

<figure>
  <figcaption>Grayscale</figcaption>
  <img id="grayscale" src="#">
</figure>

<figure>
  <figcaption>Inverted</figcaption>
  <img id="invert" src="#">
</figure>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

加载图像源后的jQuery动画

0 个答案: