jQuery 애니메이션을위한 이미지 미리로드

jQuery 프리로드 스레드의 힙이 있고 대부분을 읽었지만 여전히 내 문제의 해결책을 찾을 수없는 것 같습니다.jQuery 애니메이션을위한 이미지 미리로드

큐를 사용하고 이미지의 순차적 이름을 기반으로 jQuery를 통해 빌드 된 "스톱 모션"애니메이션이 있습니다. 이 애니메이션을 실행하는 데 필요한 모든 이미지가로드 될 때까지이 애니메이션을 실행하고 싶지 않습니다. Spriting은 제품 유형별로 다른 애니메이션이 있고 모든 이미지가 이미 클라이언트에 의해 생성 되었기 때문에 현재로서는 옵션이 아닙니다.

순간 내 예압 코드는 아래와 같다 :

프레임 (이 단계에서 6, 12)의 순서에 따라 전체 이미지 수 있으며, 다음과 같이 화상의 명명 규칙은

function preloadImages($img, $frames){ 
    var $imgsrc = $img.attr("src"); 
    var $getext = $imgsrc.split('.'); 
    var $ext = $getext[1]; 
    var $exploded = $getext[0].split('_'); 
    var $newsrc = ""; 
    for (var i=1; i <= $frames; i++){ 
     for (var j=0; j < $exploded.length-1; j++){ 
      $newsrc = $newsrc + $exploded[j] + "_"; 
     } 
     $newsrc = $newsrc + i + "." + $ext; 
     var image_preload = new Image(); 
     image_preload.src = $newsrc; 
    } 
}

Brand_Product_Category_ProductID_SequenceNo.jpg.

내가 뭘하려는이 문서의 준비 아래에있는 미리보기를 사용하여 이러한 모든 이미지를 미리로드 할 때까지 시작 이미지를 들고 div로드 할 수 있지만 올바르게 작동하지 않는 것, 즉, 필요한 모든 이미지가 미리로드되기 전에 홀더가 표시되므로 결과적으로 애니메이션이 원활하게 실행되지 않습니다.

$(".holder").hide(); 
preloadImages($(".holder img"), 6); 
$(".holder").fadeIn("slow");

콜백이 필요합니다. 구현 방법을 잘 모르겠지만 말입니다.

당신이 Image 객체의 src 필드에 값을 할당

, 그것은 단지가 않습니다 다음 src 속성을 변경

출처

2010-12-15 pingu

현재 코드에 어떤 문제가 있습니까? –

이미지가 사전로드되기 전에 홀더가 표시됩니다.이 질문을 포함하도록 제 질문을 편집했습니다. – pingu

명명 규칙은 무엇입니까? 왜 모든 변수 이름의 앞에 $ 기호가 붙어 있습니까? (다소 혼란 스럽습니다.) –

문제는 이것이다. 브라우저는 여전히 src 속성이 가리키는 곳에서 이미지를로드해야합니다.

이미지의 '로드'이벤트에 대한 핸들러를 정의 할 수 있습니다. 그러면 해당 라인을 따라 무언가를 사용해야 할 것입니다.

한 가지 방법은로드해야하는 이미지 목록을 정의하는 것입니다. 이미지가로드 될 때마다 배열에 플래그를 설정하십시오. 주기적으로 배열을 검사하고 모든 이미지가로드되었음을 나타내는 모든 플래그가 설정되면 div을 페이드 인 (fade in) 할 수 있습니다.

출처

2010-12-15 01:41:46 Dancrumb

jQuery 애니메이션을위한 이미지 미리로드

답변

관련 문제