쇼 "로드"새 이미지가

Question

을로드하는 동안 나는

<img src="..." class="myImage"> 
<a href="..." class="changeImage"> 

$(function(){ 
    $('a.changeImage').click(function(){ 
     $('img.myImage').attr('src',NEWVALUE); 
    }); 
}); 

내가 링크를 클릭

, 난 .myImage에 새 SRC를 주입합니다. 새 src가로드되는 동안로드 이미지를 표시 할 수 있습니까?

Answer 1

을 사전로드 이미지를 사용한다 img을 CSS를 통해 background-image으로로드 중입니다.

#loaded-image { 
    /* shows loading icon until picture is fully loaded */ 
    background-image: url(loading.gif); 
    background-repeat: no-repeat; 
} 

Answer 2

jquery.blockui 플러그인을 살펴보십시오. 그것은 당신의 필요에 맞을 수도 있습니다.

Answer 3

$(function(){ 
    $('a.changeImage').click(function(e){ 
     e.preventDefault(); 
     //show the loading div 
     $('img.myImage').attr('src',NEWVALUE); 
     $("img").trigger("onload"); 
    }); 

$("img").bind("onload",function(){ 

//remove the loading div 
}); 
}); 

http://jsfiddle.net/PrXSW/9/

Answer 4

예, 간단한 해결책이를 선언하는 것입니다 당신은

<img src="smallLoader.png" alt="loading" id="loading" /> 
<img alt="bigImage" id="bigImage" style="display:none" /> 

<script type="text/javascript"> 
$(document).ready(function() { 

    $('#bigImage').load(function() { 
     $('#loading').hide(); 
     $('#bigImage').show(); 
    }); 

    $('#bigImage').attr("src", "bigimage.png"); 
}); 
</script> 

Answer 5

load event (테스트되지 않은 코드)를 사용할 수 있습니다

var newImage = new Image(); 
var loadingSrc = 'loading.gif'; 
$('img.myImage').attr('src', loadingSrc); 
newImage.onload = function() { 
    $('img.myImage').attr('src', newImage.src); 
}; 
newImage.src = NEWVALUE;