Показать spinner при загрузке нового изображения

Question

Роль сценария заключается в изменении image.jpg с помощью newimage.gif и наоборот при нажатии.
Теперь я хочу добавить счетчик при загрузке newimage.gif.
Что-то вроде 9gag.com/gif.
Может кто-нибудь помочь мне, пожалуйста?

Это код:
HTML

<img src="/image.jpg" id="pic" onclick="change()"/> 
<a id="first" href="/newimage.gif" style="display:none;"></a> 
<a id="second" href="/image.jpg" style="display:none;"></a> 

ява

function change(){ 
    var imag = document.getElementById('pic').src; 
    var img = imag.slice(-3); 
    var img1 = document.getElementById('second').href; 
    var imag2 = document.getElementById('first').href; 

    if(img == 'gif') { 
     document.getElementById('pic').src=imag2; 
     // here the newimage.gif changes to image.jpg 
    } else { 
     // here the image.jpg changes to newimage.gif 
     document.getElementById('pic').src=img1; 
    } 
} 

Answer 1

Я создал подобный один и сделал это так. Может быть, это поможет вам, а

function load_bike(imgUrl){ 
old_url=$('#bike_img').attr('src'); 
$('#bike_img').load(function(){ 
$('.loading').css("display","none"); 
$('#bike_img').css("display","block"); 
}).attr('src', imgUrl); 
$('.loading').css("display","block"); 
$('#bike_img').css("display","none"); 
} 

Answer 2

Вы можете показать блесну, но сделать это хорошо сначала вы должны знать исходный размер файла или по крайней мере показать его как увеличить. Без изображения ваш html-элемент будет иметь высоту 0px, поэтому, даже если вы добавите приятную анимацию, вы ее не захотите.

Лучший способ для добавления и удаления вертушка является добавление/удаление класса CSS для элемента, например:

var pic = document.getElementById('pic'); 
pic.onload = function() { 
    pic.className = ''; 
} 

function change(){ 
    imag = document.getElementById('pic').src; 
    var img = imag.slice(-3); 
    var img1 = document.getElementById('second').href; 
    var imag2 = document.getElementById('first').href; 
    var pic = document.getElementById('pic'); 

    pic.className = 'loading'; 
    if(img == 'gif') { 
    pic.src=imag2; 
    } else { 
    pic.src=img1; 
    } 
} 

Этот образец кода будет установлен атрибут класса элемента «загрузки», а затем, когда элемент загруженный, он удалит атрибут класса элемента. Затем вы должны создать свой собственный CSS, которые могут lõoke так:

.loading { 
    background-image: url('URL_TO_IMAGE'); 
} 

Answer 3

я нашел своего рода образом, единственная проблема заключается в том, что после того, как image.gif загружается вертушку все еще появляется.

if(img == 'gif') { 
document.getElementById('pic').src=imag2; 
// here the newimage.gif changes back to image.jpg 
document.getElementById("spinner").style.display = "none";  
} else { 
document.getElementById('pic').src=img1; 

var image = new Image(); 
image.src = document.getElementById('second').href; 

var x = image.complete; 
if(x) { 
document.getElementById("spinner").style.display = "none"; 
} else { 
document.getElementById("spinner").style.display = "block"; 
} 
} 
} 

Это здесь я использую скрипт http://www.2lol.ro/load/poze_haioase_miscatoare/20?ref=stk