Switch opencollective image listing and avatars fadein

Author: Munter

docs/_includes/backers.md

@@ -2,5 +2,5 @@
 
 Find Mocha helpful?  Become a [backer](https://opencollective.com/mochajs#support) and support Mocha with a monthly donation. 
 
-{: id="_backers" }
+{: id="_backers" class="image-list" }
 {% for i in (0..29) %}[![](//opencollective.com/mochajs/backer/{{ i }}/avatar.jpg)](https://opencollective.com/mochajs/backer/{{ i }}/website){: target="_blank" rel="noopener"}{% endfor %}

docs/_includes/head.html

@@ -9,5 +9,4 @@
   <!--[if lt IE 9]>
     <script src="js/html5shiv.min.js"></script>
   <![endif]-->
-  <script src="js/avatars.js"></script>
 </head>

docs/_includes/sponsors.md

@@ -2,5 +2,7 @@
 
 Use Mocha at Work?  Ask your manager or marketing team if they'd help [support](https://opencollective.com/mochajs#support) our project.  Your company's logo will also be displayed on [npmjs.com](http://npmjs.com/package/mocha) and our [GitHub repository](https://github.com/mochajs/mocha#sponsors).
 
-{: id="_sponsors" }
-{% for i in (0..29) %}[![](//opencollective.com/mochajs/sponsor/{{ i }}/avatar.jpg){: onload="window.avatars.sponsorLoaded()" }](https://opencollective.com/mochajs/sponsor/{{ i }}/website){: target="_blank"} {% endfor %}
+{: class="image-list faded-images" }
+{% for i in (0..15) %}[![](//opencollective.com/mochajs/sponsor/{{ i }}/avatar.jpg)](https://opencollective.com/mochajs/sponsor/{{ i }}/website){: target="_blank"} {% endfor %}
+
+<script src="js/avatars.js"></script>

docs/css/style.css

@@ -57,37 +57,32 @@ header {
   font-style: normal
 }
 
-#_backers {
-  display: flex;
-  flex-wrap: wrap;
+.image-list {
+  overflow: hidden;
 }
 
-#_backers a {
-  margin: 3px;
+.image-list a {
+  float: left;
+  margin: 6px;
 }
 
-#_backers a img {
+.image-list a img {
   display: block;
-  width: 64px;
   height: 64px;
-
-  margin: 0;
-  box-shadow: none;
-
-  background: url(/images/backer-background.svg?inline) center center no-repeat;
 }
 
-#_sponsors a {
+.faded-images img {
   opacity: 0;
   transition: opacity .3s;
 }
 
-#_sponsors a img {
-  max-height: 64px;
+.faded-images.is-loaded img {
+  opacity: 1;
 }
 
-#_sponsors.onload a {
-  opacity: 1;
+#_backers a img {
+  width: 64px;
+  background: url(/images/backer-background.svg?inline) center center no-repeat;
 }
 
 h2 {

docs/js/avatars.js

@@ -1,15 +1,23 @@
 (function () {
   'use strict';
-  // dumb thing that helps with animation of avatars
-  var avatars = window.avatars = function (type) {
-    return function avatarLoaded () {
-      avatars[type] = typeof avatars[type] === 'number' ? avatars[type] + 1 : 1;
-      if (avatars[type] === 30) {
-        document.getElementById(type).classList.add('onload');
+
+  var imageLists = document.querySelectorAll('.image-list');
+
+  Array.prototype.forEach.call(imageLists, function (imageList) {
+    var images = imageList.querySelectorAll('img');
+    var counter = images.length;
+
+    function onloadHandler() {
+      counter -= 1;
+
+      if (counter === 0) {
+        imageList.classList.add('is-loaded');
       }
-    };
-  };
+    }
+
+    for (var i = 0; i < images.length; i += 1) {
+      images[i].onload = onloadHandler;
+    }
+  });
 
-  avatars.backerLoaded = avatars('_backers');
-  avatars.sponsorLoaded = avatars('_sponsors');
 }());