jQuery 다양한 수준의 이미지로드

Question

웹 사이트에 표시 할 이미지가 많습니다.

나는 각기 다른 화질의 이미지를 가지고 있습니다. 나는 엄지 (~ 10kb), 소형 (~ 200kb), 중형 (~ 1.2mb) 및 대형 (~ 2.5mb)을 가지고 있습니다. 내가 뭘 원하는 엄지 이미지를 표시하고 자바 스크립트를로드하고 작은 그것을로드 할 때 그것을 교체하고 다음 매체를로드하고 등등 교체하십시오. 그렇게하면 이미지가 곧바로 나타나 더 나은 품질을 얻을 수 있습니다.

이미지가 div의 배경으로 표시되고 크기가 포함 된 것으로 설정되어 있기 때문에 작은 이미지가 공간을 채우도록 늘어납니다.

모두 나는 이미지를로드하고로드되었을 때 배경을 대체 할 jQuery가 필요하다.

UPDATE

이것은 내가 그것을 해결 한 방법이다. 나는 각각의 이미지를로드하고 완료되면 표시되는 숨겨진 img 요소를 만들었습니다. 그러나 나는 그것을 깨끗이하는 데 도움을 줄 것이라고 말하지 않을 것입니다.

은 HTML은

<img id="image_loader" style="display:none;" /> 

입니다 그리고 jQuery를이

$("#image_loader").attr("src", SmallURL); 
$("#image_loader").load(function() { 

    $("#image_container").css("background-image", 'url('+SmallURL+')'); 

    $("#image_loader").attr("src", MedURL); 
    $("#image_loader").load(function() { 

     $("#image_container").css("background-image", 'url('+MedURL+')'); 

     $("#image_loader").attr("src", LargeURL); 
     $("#image_loader").load(function() { 

      $("#image_container").css("background-image", 'url('+LargeURL+')'); 
      $("#image_loader").unbind('load'); 

     }); 
    }); 
}); 

입니다하지만이 끔찍하게 지저분하다. 배열에 URL을 넣고 시도했는데 $.each을 수행했지만 큰 파일 만 건너 뜁니다.

두 번째 업데이트는

나는 또한 한 번에 모든 이미지가로드되었던로드 기능을 바인딩을 해제 할 필요하거나이 무한 루프에 갇혀 얻을 것이라는 점을 발견했습니다. 바라기를 바꿔서 이것을 정리할 수 있다면 무한 루프가 생기지 않도록 할 수 있습니다.

어떻게하면이 문제를 해결할 수 있습니까?

Answer 1

JQuery API은 아직 체크 아웃하지 않은 경우 좋은 출발점이 될 수 있습니다.

당신이 할하려는 것은 ... 같은

<img src="image_low.jpg" class="low"/> 
<img src="image_med.jpg" class="med" style="display:none;"/> 
<img src="image_high.jpg" class="high" style="display:none;"/> 

<script> 
    $('.low').load(function() { 
     $(this).attr("src", $('.med').attr('src')); 
    }); 

    $('.med').load(function() { 
     $(this).attr("src", $('.high').attr('src')); 
    }); 
</script> 

편집을 당신이 품질의 각 레벨에서 여러 이미지를로드 할 같은 소리, 그래서 뭔가 : here를 개선되었다 내가 가진 내 자신의 시도 here