How to display gif animation for user while uploading image (online)?

Question

Problem: I have a set of images, when the user clicks on one of them, it grows to an area on the page. Photo sharing is done using js. The image weighs about 0.5 M, so it takes about 3 seconds until the image is displayed. I would like to introduce an animation type until the image is displayed. How can I do this with js?

Answer 1

Use the load event, for example:

$("img.something").click(function() { $(".someDiv").html('<img src="loading.gif"/>'); var $img = $('<img src="bigImage.jpeg" style="display:none"/>'); $img.load(function() { // once the loading has completed $(".someDiv").html($(this)); $(this).fadeIn("slow"); }); }); 

Answer 2

There is always a "marquee" tag with the message "download", which you turn off as soon as your image is replaced. Of course, even I would overthrow anyone protecting the tent.

Answer 3

Insert a placeholder and attach the onload event callback to the <img> element. Using jQuery

 var imageElem = $('<img />'), placeholder = $('<div class="loading">Loading...</div>'); imageElem.attr('src', 'http://example.com/big_image.jpg'); $('#images').append(placeholder).append(imageElem); imageElem.hide().load(function() { placeholder.remove(); imageElem.fadeIn(); });