DOM에 동적으로 추가 된 이미지가 표시되지 않습니다.

Question

많은 이미지와 무한 스크롤이있는 페이지가 있습니다. 그래서, 나는 그들이 뷰포트에서 갈 때 이미지를 잃고 싶지과 다시 스크롤 할 때 다시 그들에게 보여

이것은 예를 들어 이미지 및 유지 DIV이다.

<div class="imgHldr2" data-content="<img src=/path/to/my/image.jpg class=wImage>"> 
    <img src=/path/to/my/image.jpg class=wImage> 
</div> 

때 클래스를 가진 요소 imgHldr2 뷰포트에서 나가기 이미지를 숨긴 다음 data-content 내용에서 다시 빌드합니다.

이미지를 DOM에 다시 추가 할 때 이미지가 렌더링/표시되지 않을 때 완전히 완벽하게 작동합니다. 여기에 내가 그것을하고있어 방법은 다음과 같습니다

$(window).scroll(function() { 
    if(timer) { 
    window.clearTimeout(timer); 
    } 

    timer = window.setTimeout(function() { 

    $(".imgHldr2:below-the-fold").each(function() { 
     $(this).next('.wImage').detach(); 
    }); 
    $(".imgHldr2:above-the-top").each(function() { 
     $(this).next('.wImage').detach(); 
    }); 
    $(".imgHldr2:in-viewport").each(function() { 
     // the next line puts the content back in as I can see it in inspector 
     // but it doesn't actually redraw it 
     $(this).append($(this).data('content')); 
    }); 

    }, 350); 
}); 

Answer 1

이 VAR 키워드를 사용해보십시오. http://jsfiddle.net/gd7cokyy/가 (바이올린에서이 요소를 추가,하지만 그들을 제거하지 않습니다.) 토론 우는 소리에서 찾을 수 있습니다 이유 설명 :

$(window).scroll(function() { 
    if(timer) { 
    window.clearTimeout(timer); 
    } 

    var timer = window.setTimeout(function() { 

    $(".imgHldr2:below-the-fold").each(function() { 
     $(this).next('.wImage').detach(); 
    }); 
    $(".imgHldr2:above-the-top").each(function() { 
     $(this).next('.wImage').detach(); 
    }); 
    $(".imgHldr2:in-viewport").each(function() { 
     // the next line puts the content back in as I can see it in inspector 
     // but it doesn't actually redraw it 
     $(this).append($(this).attr('data-content')); 
    }); 

    }, 350); 
}); 

는 여기에 바이올린입니다.

그러나 줄은 if(timer) { window.clearTimeout(timer); }은 필요하지 않습니다. 사실, 왜 그 타이머를 사용합니까?

$(window).scroll(function() {  
    $(".imgHldr2:below-the-fold").each(function() { 
     $(this).next('.wImage').detach(); 
    }); 

    $(".imgHldr2:above-the-top").each(function() { 
     $(this).next('.wImage').detach(); 
    }); 

    $(".imgHldr2:in-viewport").each(function() { 
     $(this).append($(this).attr('data-content')); 
    }); 
}); 

또한 detach() 대신 jquery의 remove() 메소드를 사용해야합니다.

HTML의 구조를 변경하는 것도 고려해 볼 수 있습니다. html을 특성에 저장하는 것은 결코 좋은 습관이 아닙니다. 또한 저장하려는 이미지의 src 일 경우 그 값만 저장할 수 있습니다. 당신의 방법 :

<div class="imgHldr2" data-content="<img src=/path/to/my/image.jpg class=wImage>"> 
    <img src=/path/to/my/image.jpg class=wImage> 
</div> 

오른쪽 방법 :

이

<div class="imgHldr2" data-img-path="/path/to/my/image.jpg"> 
    <img src="/path/to/my/image.jpg" class="wImage"> 
</div>