2011-12-11 2 views
2

불필요한 이미지를 다운로드하지 못하도록 요청시 이미지를로드하려고합니다. 나는 jQuery를 사용하고있다. 지금까지 내가 생각해 냈습니다.jQuery 요청시 이미지로드

$('#region_image').attr({'src':'/images/'+e.key+'.jpg'}).load(function(){ 
    $(this).fadeIn(); 
}); 
// e.key is the name of the image I want to load now. 

사용에 대한주의 사항이 있습니까?

편집 :

주의 할 상태 Nr. 1 :

루프에서로드 이벤트를 바인딩이 다음 실행에 두 번 바운드됩니다 기억 해요.

주의 할 수 (Nr). 2 :

이미지는 항상 존재, 또는 오류 처리가 장소에 있어야합니다로드하려고했습니다.

+0

당신은 아마 ".prop()"대신 1.5.x. 것보다 당신이 jQuery를 버전을 사용하는 경우 새로운 ".attr()"의 사용해야합니다 – Pointy

+0

다음은 필요에 따라 이미지를로드하는 흥미로운 CSS 기반 기술입니다. http://podlipensky.com/2013/06/css-only-load-images-on-demand/ –

답변

4

이 좋은 라이브러리입니다 : 그들은 볼 수 있습니다 경우 JAIL

선택한 이미지가 다운로드됩니다은 그들이 뷰포트 (직사각형 시청 지역) 내부 볼 수 있습니다 때. 이미지는 이벤트가 트리거 된 후 (예 : 클릭, 마우스 오버 및 스크롤) 또는 지정된 지연 후로드 될 수 있습니다. DOM이 생성 된 후 (문서 준비) jail()을 호출하는 것이 좋습니다.

관련 문제