jQuery 2

Table - td index 설정

간혹 html table에서 특정 열을 선택하고 싶을때가 있다. 보통은 nth-child(n) 선택자를 쓴다거나 tr을 for문, filter를 사용하여 td의 index() 값이 일치하는 항목을 선택하는 방식으로 기능을 구현할 수 있다. 하지만 이는 colspan, rowspan이 적용된 cell에 대해선 원하는 index가 선택되지 않게 된다. HTMLTableCellElement의 cellIndex 값은 cell을 감싸고있는 tr 내에서의 index값을 지정하기 때문이다. 0 => cellIndex : 0, 원하는 index값 : 0 1 => cellIndex : 1, 원하는 index값 : 1 3 => cellIndex : 2, 원하는 index값 : 3 4 => cellIndex : 3, 원하는..

Javascript 2020.09.22

Image Lazy Loading

다수의 이미지가 존재하는 화면의 경우엔 이미지가 한꺼번에 로딩이되며 랜더링 속도가 저하된다. 그리고 사용자가 모든 이미지를 다 보지 않을 경우엔 불필요한 이미지가 로딩되어 데이터가 낭비된다. 랜더링 성능 향상 및 불필요한 데이터 낭비를 줄이기 위해 화면에 보여지는 항목만 이미지만 로딩될 수 있도록 조치가 필요한다. 1. img 태그에 src 지정하지 않기. 2. 이미지 로딩 1) 스크롤 이벤트를 이용 2) 화면에 보여질 Y축 포지션 값(bottomPos)을 설정 3) 화면에 보여질 img 항목들을 필터링 4) img의 top 포지션값이 bottomPos보다 작을 경우 src값을 설정 5) opacity값을 변경하여 화면에 표시 (opacity : 0 -> 1)로 변경 // Simple Image Lazy..

Javascript 2019.10.04
반응형