JSFiddle - React, Tailwind, and code Playground

by pleinx

HTML

<div class="test">
  <img src="https://via.placeholder.com/5000x3100">
  <img src="https://via.placeholder.com/5000x3100">
  <img src="https://via.placeholder.com/5000x3100">
  <img src="https://via.placeholder.com/5000x3100">
  <img src="https://via.placeholder.com/5000x3100">
  <img src="https://via.placeholder.com/5000x3100">
  <img src="https://via.placeholder.com/5000x3100">
  <img src="https://via.placeholder.com/5000x3100">
</div>

<script>
	$('.test img').each(function() {
  	$(this).attr('src', $(this).attr('src') + '?t=' + Math.floor((Math.random() * 10000) + 1));
  });
</script>

CSS

.test img {
  visibility: hidden;
}

JavaScript

$(function() {
  function allSourcesLoaded($target, callback, exclude = []) {
  	var $sources = $target.find('img, iframe, video'),
    	  loadCount = 0,
        deferreds = [];
  
  
  	$sources.each(function(index, source) {
    	var $source = $(source);
    	deferreds.push($.Deferred(function() {
      	var self = this;
        $source.on('load', function() {
        	self.resolve();
        })
      }));
    });
    
    console.log(deferreds);
  
    $sources.on('load', function(e) {
      loadCount++;
      
      if(typeof callback === 'function' && loadCount === $sources.length) {
      	callback();
      }      	
    });
    
    return deferreds;
  }

/*
  allSourcesLoaded($('.test'), function() {
  	console.log("all sources in '.test' loaded (callback)");
  });
*/
  
  $.when.apply($, allSourcesLoaded($('.test'))).then(function() {
		console.log("all sources in '.test' loaded (def)", arguments);
  });
});