요소가 뷰포트에만 들어올 때 이미지가로드됩니다.

Question

사진 갤러리를 만들고 있는데 컨텐츠 "DIV"요소가 뷰포트에 들어있을 때만 이미지를로드하려고합니다.이 경우 jquery viewport.js를 사용하고 있습니다.

기본적으로 각 "IMG"태그의 src 속성을 "LOADING.JPEG"로 설정하고 div가 뷰포트에 들어 오면 IMG 태그의 src 속성을 실제 이미지로 변경합니다. 그러나 SRC 속성 이미지가 변경되지 않으면 여전히 LOADING.JPEG가 표시됩니다.

$(".content").each(function(i,obj){ 
    var element = obj.id; 
    if($("#"+element).is(':in-viewport')){ 
     var link = $("#"+element+" div a").attr('href'); 
     //set the image src from loading to read image 
     $("#"+element+" div a img").attr('src',link); 
    } 
}); 

어떤 도움이나 제안이라도 대단히 감사하겠습니다.

감사

Answer 1

당신이 복잡하고 있습니다 왜? - 사용해보기 -

$(".content").each(function(i,obj){ 
    if($(this)).is(':in-viewport')){ 
     var link = $("div a",this).attr('href'); 
     //set the image src from loading to read image 
     $("div a img",this).prop('src',link); 
    } 
}); 

Answer 2

Lazy Load jQuery plugin을 사용해 보셨습니까?

일부 이미지는 뷰포트에있을 때 부드럽게 사라집니다. 설정 충분히 쉬운 너무, 당신은 각각의 이미지에 대한 데이터 속성에 전화 :

<img class="lazy" data-original=“img/example.jpg” src=“img/grey.gif” width=“640” height=“480”> 

그래서 그것을처럼 시작 :

$("img.lazy").lazyload();