Show Loading Gif While Full Image Loading

Question

So basically I need to

$("img#icon").click(function() {

// start loading FullImg and FadeIn loading gif

// while full image is loading get its height like this below

$("img#FullImg").load(function(){
  var imgHeight = $(this).height();
});

// when FullImg loaded, FadeOut Gif and then animate block and FadeIn FullImg

    $("#block").animate({
        height: '+='ImgHeight
    },
    function() {
        $("img#FullImg").fadeIn("slow");
    });

}

Do I need some sort of AJAX for this?

[How to show a spinner while loading an image via JavaScript](http://stackoverflow.com/questions/51352/how-to-show-a-spinner-while-loading-an-image-via-javascript), [preload image and show a spinner while loading](http://stackoverflow.com/questions/2664266/preload-image-and-show-a-spinner-while-loading) — Andreas, Sep 09 '15 at 04:54

score 0 · Accepted Answer · edited May 23 '17 at 12:29

jquery.ajax only accepts xml, html, script, plain text and json datatype.

dataType (default: Intelligent Guess (xml, json, script, or html))

Ref: http://api.jquery.com/jquery.ajax/

Or use Base64 image data something like data:image/png;base64,iVBORw0KGgoAAAANSUhE... and load it from a webservice

Or you shall create an img tag on the fly and put the src property to url something like below,

$.fn.image = function(src, callback) {
   return this.each(function() {
         var i = new Image();
         i.src = src;
         i.onload = callback;
         this.appendChild(i);
   });
}

$("#btnLoadImg").on("click", function() {
   var container = $("div#container");
   $('#overlay').show();
   container.image("https://i.imgur.com/9fEliNr.jpg",function(){
      $('#overlay').hide();
      container.fadeIn();
   }); 
});

#container {
   display: none;
}
#overlay {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #000;
    opacity: 0.8;
    filter: alpha(opacity=80);
 display: none;
}
#loading {
    width: 50px;
    height: 57px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -28px 0 0 -25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnLoadImg" type="button">Load Image</button>
<div id="container"></div>
<div id="overlay"><img id="loading" src="https://i1.wp.com/cdnjs.cloudflare.com/ajax/libs/galleriffic/2.0.1/css/loader.gif"></div>

Ref: https://msankhala.wordpress.com/2012/08/29/loading-image-through-ajax/

See also a similar question here Asynchronously load images with jQuery

score 0 · Answer 2 · answered Sep 09 '15 at 05:45

This doesn't fit perfectly but it has all steps in it to fulfill your requirement with some minor adjustments :)

function loadImage(src, destinationNode) {
    var el = destinationNode instanceof jQuery ? destinationNode : $(destinationNode),
        img = new Image();
    
    img.onload = function() {
        el.empty()              // remove unnecessary child nodes
          .hide()               // hide the container
          .append(img)         // add the image to the DOM
          .slideToggle(4000);   // fade the image in
    };
    
    el.text("Loading full image..."); // would be your spinner
    img.src = src;   // start loading the image
}


$("button").on("click", function() {
    loadImage("https://i.imgur.com/Nmuav.jpg" + "?_" + (new Date().getDate()), $("#fullImg"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Load image</button>
<div id="fullImg"></div>

Show Loading Gif While Full Image Loading

2 Answers2