There is a function, when you click on the image, the request goes and we get a new image. But the images are of different sizes and it loads and looks not very nice. How can I make a preloader or make the image appear smoothly?

Here is the function itself:

function nextPhoto() { jQuery.ajax({url: "/guess_the_group/workphoto.php", dataType: "html", type: "GET", success: function(msg) { //alert("хуяк"); document.getElementById('photoband').innerHTML = msg; }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert('Ошибка'); } }); }

Here's how it works http://yametal.net/guess_the_group/

    2 answers 2

    You just change html in the block and, apparently, it is always visible. Make an empty block hidden, for example. Add $("#ΠΈΠ΄Π±Π»ΠΎΠΊΠ°").append() (before this, cleaning it with $("#ΠΈΠ΄Π±Π»ΠΎΠΊΠ°").empty() ), add your image with the parameter onload="loadImage()", and in the function, we make the replacement of the image from here from hidden to open - this is so, on the vskidku option.

      .fadeOut (400) .fadeIn (400)

      so that the image appears smoothly

      Twist need in this direction.