Show Loading Gif While Full Image Loading

debugcn Published at Dev

user5314029

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?

kolunar

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

Collected from the Internet

Please contact [email protected] to delete if infringement.