0

I am using $().promise().then() to start animation after image source is loaded. Everything works, but I am not sure... Is this The Right Way? Is there another jQuery construction to run animation after all images are loaded?

WARNING

$(window).load() will not work. I need solution - callback, which will be fired AFTER ALL images loaded. But after all PROGRAMATICALLY loaded images - see

prop("src","http://lorempixel.com/320/180/business"). 

$(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);
  })  
       
})
: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%);
} */
<!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>
  • 2
    Please check below link, http://stackoverflow.com/questions/4857896/jquery-callback-after-all-images-in-dom-are-loaded – Prabu Mar 29 '17 at 14:57
  • 1
    First suggestion: if you set the animation effect on the `id` attribute, you can't repeat animation on another element. Use custom `data-*` attributes for that, or even classnames. Second suggestion: you code can work, but the scope of `this` is not clear on some methods. Take care about it and be sure that you are `apply()` or `bind()` to the right scope. – Marcos Pérez Gude Mar 29 '17 at 14:59

0 Answers0