Jquery img.load 질문

Question

일부 이미지를 순환하려면 jQuery cycle plugin을 사용하고 있습니다. 이 이미지들은 모두 DIV 안에 들어 있습니다. 모든 이미지가로드되거나 적어도 처음 4 또는 5가 될 때까지주기 플러그인을 실행하지 않으므로 이미지가 아직로드되지 않은 상태로 표시됩니다. 이 작업을 수행하는 쉬운 방법이 있습니까?

div의 마지막 img에 'lastImg'클래스를 추가하고 'load'이벤트를 추가하려고 시도했습니다.

Markup 
<div id='cycle'> 
    <img src=''/> 
    <img src=''/> 
    <img src='' class='lastImg'/> 
</div> 

JQuery 
    $('lastImg').load(function(){ 
     $('#cycle').cycle({..}); 
    }); 

이, 크롬과 FF에 좋아 보인다 인정 하듯이 조금 flakey가의 (경우에 따라서는? 이미지가 캐시에 어쩌면 경우, 작동하지 않습니다)와 전혀 IE (깜짝 놀람 ..).

내가 할 수있는 다른 제안 사항이 있으십니까?

Answer 1

마크 업 :

<div id='cycle'> 
    <img src='path1' class='preload' /> 
    <img src='path2' class='preload' /> 
    <img src='path3' class='preload'/> 
</div> 

이를 시도해보십시오 preload 클래스는 당신이 미리로드 할 모든 이미지에 연결되어

var cyclerLoaded = false; 
var numberOfPreloaded = 0; 

function imageLoaded() 
{  
    numberOfPreloaded++; 

    if (numberOfPreloaded >= 4 && !cyclerLoaded) 
    { 
    $('#cycle').cycle({..}); 
    cyclerLoaded = true; 
    } 
} 

$(document).ready(function() 
{  

    $('img.preload').each(function() 
    { 
    // Get image instance. 
    var image = new Image(); 
    image.src = $(this).attr('src'); 

    if (image.complete)   
     imageLoaded();   
    else   
     image.onload = imageLoaded; 

    }); 

}); 

을 ....

Answer 2

더 좋은 방법은 충분한 수의 이미지를 미리로드 한 다음 사이클 기능을 호출하는 기능을 작성하는 것입니다. 페이지의 이미지가 어떻게, 언제, 어떤 순서로로드되는지는 브라우저 또는 기타 환경에 따라 다를 수 있습니다.

ajaxian의 멋진 기능은 페이지에서 참조 된 스타일 시트에서도 사용할 수있는 모든 이미지를 사전로드하는 것입니다.

Answer 3

문서의로드 이벤트에 사이클 플러그인을 연결하지 않으시겠습니까? 문서의로드 이벤트는 모든 artificat가 다운로드되면 실행됩니다. [준비 이벤트가 발생 DOM 사용할 수 있습니다.]

코드에서 잘못

$(document).load(function() { //your cycle plugin hookup }); 

Answer 4

한 가지는 당신이 $('lastImg')을 사용하는 것입니다 시도하지만 $('.lastImg')을해야합니다.

따라서 코드는 전혀 실행되지 않습니다.