JQuery와는

Question

로드

가능한 중복 : 이제

<div class="image"> 
    <img class="" src="content-images/1.jpg"> 
    <span class="slide" rel="content-images/2.jpg"></span> 
    <span class="slide" rel="content-images/3.jpg"></span> 
    <span class="slide" rel="content-images/4.jpg"></span> 
</div> 

: 나는 다음과 같은 마크 업이 상황이
jQuery check if image is loaded

CSS에서 div.image의 모든 자식은 절대적으로 배치되므로 t에 쌓입니다. 서로의 op. 내가 뭐하는 거지

특정 트리거에 버튼이 각각의 범위에서 rel에 src 세트의 '의 img에의'상기 span을 변경하려면 페이지에 다른 곳을 클릭 할 때의 말을 할 수 있다는 것입니다. 이미지는 큰 고해상도 이미지이므로 완전히로드하는 데 시간이 걸릴 수 있습니다.

javascript/jQuery 사용 span이 모두 img의 완료로 교체 될 때까지 버튼을 클릭했을 때부터로드 메시지/표시기를 표시해야합니다.

내가 사용할 수 없습니다 jQuery의 .load() 때문에 이미지와 캐시 등

내가 imagesloaded를 사용하여 시도하지만 내가해야 할 일을하지 않는 것으로 알려진 문제의.

당신이 생각할 수있는 다른 방법이 있습니까?

Answer 1

그건 당신이 달성하고자하는 거라면 내가 아주 확실하지 않다,하지만 당신은 그것을 시도를 줄 수 ...

$("#button").click(function(){ 
    console.log("Started loading..."); 
    // Get all spans to replace, and count them 
    var imgSpans = $("div.image span.slide"), 
     toLoad = imgSpans.length, 
     loaded = 0; 
    // Now load each image 
    for (var i = 0; i < toLoad; ++i) { 
     // Closure to keep correct value of i 
     (function(i){ 
      // Preload image 
      var img = new Image(); 
      img.src = imgSpans.eq(i).attr("rel"); 
      img.onload = function(){ 
       // When loading has finished, replace span with img... 
       imgSpans.eq(i).replaceWith(img); 
       if (++loaded == toLoad) { 
        // ...and check if all images have been loaded by now 
        console.log("Finished loading..."); 
       } 
      }; 
     })(i); 
    } 
}); 

DEMO (JSFiddle)