JSFiddle - React, Tailwind, and code Playground

by meo

HTML

<img src="/img/top-bg.png" alt="dini mueter in blau" />

CSS

img {
    width: 100%;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 300ms linear;
}

img.done {
    visibility: visible;
    opacity: 1;
}

JavaScript

/* jQuery imageSpoil |  Image Prealoader
 *  Preloads an image ang gives a callback
 *
 * Usage:
 * $("img").imageSpoil( finalCallBack,sibgleCallBack );
 *
 * @return: loaded images
 * @author: David Aerne
 */

(function( $ ){
  var methods = {
      init: function( callbackAll,callbackSingle ){

      var totalCallbacks, ieCachehack, $images, handleCallbacks;

      $images = this;
      totalCallbacks = $images.length;
      callbackSingle = callbackSingle || function(){};
      callbackAll = callbackAll || function(){};
      ieCachehack = function(){
        return ($.browser.msie ? "?ie=" + Math.random()*999 : "");
      };

      handleCallbacks = function( $that,error ){
          var status = error || "success";

          totalCallbacks--;
          callbackSingle.call( $that,status );

          if( (totalCallbacks-1) <= 0 ){
            callbackAll.apply( $images );
          };
      };

      return this.each(function(){
        var $that = $(this);

        $("<img />").attr("src", $that.attr("src") + ieCachehack()).load(function(responseText, textStatus){
            if (textStatus == "error") {
                return handleCallbacks($that,true);
            }else{
                return handleCallbacks($that);
            }    
        });

      });
    }
  }

  $.fn.imageSpoil = function( method ) {
    if ( methods[method] ) {
      return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || typeof method === 'function' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.imageSpoils' );
    }
  };

 })( jQuery );

$("img").imageSpoil(function(){
    $(this).addClass("done");
});