롤오버 이미지 깜빡거림 현상

[vulcan9]

이미지로 롤오버튼을 만들면 실제 동작에서 마우스 롤오버를 반복할때마다 이미지 깜빡거림 현상이 나타남.

• 저작도구의 Chache 이미지 사용 옵션을 사용하지 않을 경우 심하게 나타남

• 개발자 도구에서 Disable cache 옵션을 활성화 한 경우 깜빡임 현상 잘 나타남

[vulcan9]

원인

• 마우스 over, down, leave 할때마다 이미지를 로드하는 시간으로 인해 깜빡임 현상 발생

해결

• over, down 상태의 cache 이미지를 프리로딩 해 놓는다.
• over, down 상태가 변할때 JS에서 style 속성 설정으로 이미지 상태를 설정하지 않는다.

상태 표시 방법 변경

• 변경전 : 상태가 바뀔때마다 style 속성을 직접 동적으로 바꿔줌
• 변경 후 : 런타임에 CSS Class를 정의하여 Class 이름만 지정해 준다. (pseudo class 정의)
  • over 상태 : pseudo::hover class 생성하여 적용
  • down 상태 : pseudo::active class 생성하여 적용

cache 이미지를 프리로딩할때 주의할점

• 다음 style 설정은 cache 이미지가 로드되지 않는다.

  • visibility: hidden; 인 경우
  • opacity:0; 인 경우
  • width: 0; height: 0; 인 경우

• 화면에 지장을 주지 않도록 다음 style로 설정한다.

      content: '';
      width: 100%; height: 100%;
      z-index: -9999;
      pointer-events: none;
      position: absolute;
  }

Jik-ji_Editor_2.0.30

• 롤오버 이미지 깜빡거림 현상 제거
  • cache 이미지 프리로딩
  • transition 삭제 (이미지 지글거림 현상)

런타임에 ~api.source() API 스크립트에 의해 이미지 소스가 동적으로 변경되는 경우 cache 이미지로 프리로드되지 않아 깜빡임이 발생할 수 있음

[onlyeye26]

확인 완료