Показать изображение загрузки без ajax

Question

<img id="Img1" class="photoBox" src="Images/DisplayImageById.ashx?number=1&userName=<%=Page.User.Identity.Name %>"/>
         <img id="Img2" class="photoBox" src="Images/DisplayImageById.ashx?number=2&userName=<%=Page.User.Identity.Name %>"/>
         <img id="Img3" class="photoBox" src="Images/DisplayImageById.ashx?number=3&userName=<%=Page.User.Identity.Name %>"/>
         <img id="Img4" class="photoBox" src="Images/DisplayImageById.ashx?number=4&userName=<%=Page.User.Identity.Name %>"/>
         <img id="Img5" class="photoBox" src="Images/DisplayImageById.ashx?number=5&userName=<%=Page.User.Identity.Name %>"/>

Я искал способ показать вращающуюся иконку, пока изображения не загрузятся без использования ajax?Я изучаю, как загружать изображения, используя ajax, но это не очень хорошо, поэтому я начал искать способ сделать это без ajax.Это возможно?

Спасибо за любую помощь.

Answer 1

Проверьте это.Это делается с помощью события jQuery load, которое сообщает, когда загружается определенный элемент, в вашем случае, img

http://jsfiddle.net/blackpla9ue/uJhCt/1/

$(function(){
  $('div img').each(function(){
    var thisImage = $(this);
    thisImage.hide(0)
             .load(function(){
                $(this).show();
             });
});

Обратите внимание, что это будет не работает, если вы поместите свой код внутрь $(document).ready(function(){ ...});