2013-08-29 2 views
3

내가 자바 스크립트에 새로운 오전과 slider.My 문제에 노력하는 것은 아래의 질문 jquery .attr() with callback? 유사하다. 흐름이 동기 인 경우, 소스가 완전히 이전 이미지자바 스크립트 동기 실행

$('.container').fadeOut(100, function(){ 
    console.log("before"); 
    $('.container > img').attr('src', 'image src'); 
    $('.container').show(); 
    console.log("after"); 
}); 
을 보여주는 것이 아니라로드 될 때까지 디스플레이가 지연 될 야해 나는 볼 수 있었다 모두 콘솔의 로그는 새 이미지가로드되기 전에

.. 수있는 사람 PLS 문제는 내가 개념을 잡아 시도하고 순진 경우 Pls는 .. 이미지가

$('.container > img').attr('src', 'image src').load(function(){ 
    $('.container').show(); 
}); 
+8

: jQuery를

에서

로드 기능을 사용한다. – SLaks

+0

U 바로 @Marcus 의해 제안 브라우저가 이미지의 로딩이 평행 또는 독립적 스크립트 실행의 수행을 의미 ?? – user1776573

답변

2

자바 스크립트가 동기를로드하는 데 시간이 필요하지만, 문제는 src 속성을 설정하면 이미지를 표시와 동일되지 않는 것입니다 때문에 이미지가로드되기 전에 콘솔 항목을 볼 수있는 이유입니다. src를 설정하면 브라우저를 디스패치하여 이미지로드를 시작하고 스크립트 실행이 계속됩니다. 이미지가로드 된 후 코드를 실행하려면 이미지의 onload 이벤트에 대한 호출을 첨부해야합니다. 동기식 아니다

$('.container > img').attr('src', 'image src').load(function(){ 
    // Stuff to do after the image has been loaded 
}); 
+0

그러나 src를 설정하기 전에로드 이벤트에 바인딩해야합니다. –

+0

@KevinB : 때문에 ... – user1776573

+0

@ user1776573 IE 네, IE7 specificially, 확실하지 IE7 문제의 그 것이다. 기본적으로 IE는로드 이벤트를 동 기적으로 실행하므로 이미지가 캐시 된 경우로드 이벤트가 바인딩되기 전에 발생합니다. –

2

사용 .load 이벤트 리스너를 용서 ... 설명 $('.container > img').attr('src', 'image src');으로 전화하면 서버가 요청됩니다. 이미지를로드하십시오. 이미지를로드하는 데 시간이 걸리므로 지연이 발생합니다. 당신이 자세히 보면

하지만, 라인은 완벽하게 실행됩니다. 이미지가

+0

그러나 src를 설정하기 전에로드 이벤트에 바인딩해야합니다. –

4

순간 당신이로드 될 때 트리거가 될 것