2012-09-18 5 views
3

현재 jQuery lazyload 플러그인을 사용하여 이미지를로드하고 있습니다. src 및 data-original 특성을 바꾸려면 javascript를 사용하고 있습니다. 이로 인해로드가 약간 깜박입니다. 나는이 깜박임을 피할 수 있도록 접히거나 접힌 부분 아래의 이미지 만 선택하는 jquery가있는 방법이 있는지 궁금합니다.jQuery 폴드 위의 이미지 선택

var $imgs = $("img:not(.nolazy)"); 
$imgs.each(function(){ 
    var imgSrc = $(this).attr("src"); 
    $(this).attr("data-original",imgSrc).attr("src","gray.gif"); 
}); 
$imgs.lazyload({ 
     effect : "fadeIn" 
}); 

편집 : @Jason Sperske 훌륭한 답변입니다. 더 당신이 그들 반복하고 창 높이보다 큰 위치 값을 볼 수 있었다 이러한 목적을 위해 선택 내장 없지만

var wH = $(window).height(); 
var $imgs = $("img:not(.nolazy)"); 
$imgs.each(function(){ 
    var imgPosition = $(this).offset(); 
    if(imgPosition.top > wH){ 
     var imgSrc = $(this).attr("src"); 
     $(this).attr("data-original",imgSrc).attr("src","gray.gif"); 
    } 
}); 
$imgs.lazyload({ 
     effect : "fadeIn" 
}); 

답변

2

: 이것은 내가 가진 깜박임 문제를 해결 한 코드입니다. Ben Pickles (his SO profile)은 이것을 onScreen이라는 필터에 구현했습니다.이 필터는 선택기와 같이 사용할 수 있습니다 (모든 요소를 ​​가져오고 수정하기 전에 목록을 페어링하므로 선택자가 아무 것도 표시되지 않습니다). 더 빠르지 만 (사실 약간 느리다), 감소 된 요소 집합은 업데이트하는 것이 더 빠를 것이다.

관련 문제