[CSS] 배경 이미지 깜박거림(Background Image Flicker)

/----------------

 CSS로 hover 등으로 배경 이미지 변경시 발생할 수 있습니다.

/----------------

 

이 문제는 IE 6에서만 나타나는 문제이며 이로 인해 가시적으로 드러나는 현상은 이미지의 깜박거림이지만 더욱 치명적인 문제는 깜박거리는 현상이 발생할때마다 (또는 깜박거리지는 않더라도) 해당 이미지를 가지고 있는 서버로 이미지 전송 요청을 보내거나 local cache 를 access (file access) 하는  현상이 유발되고 이로인해

사용자 브라우저의 메모리 및 CPU 과다사용, 랜더링 속도 저하,
working cursor(모래시계)로 마우스 커서 바뀌는 현상
등이 동반되므로 더 나은 서비스를 제공하고자 한다면 각별히 주의해야될 문제다.

이러한 현상은 일어나는 원인은 크게 두가지 유형 정도로 판단된다.

문제 1) href 속성이 주어진 A 태그가 있고 해당 A 태그 혹은 그 하위 element에 css로 background-image 를 적용하였을 경우, A 태그에 hover(마우스 오버, 포커스 이동 등)가 되면 A 태그와 그 하위에 있는 모든 element에 적용된 background-image가 - 같은 이미지 일지라도 element 수만큼 - 서버에 재요청되는 현상이 생긴다.
-> 깜박거림, working cursor등이 동반될 수 있다.

문제 코드1

  1. <html>  
  2. <head>  
  3.     <title>test</title>  
  4.     <style type="text/css">  
  5.     span {background-image: url(test1.gif);}   
  6.     a    {background-image: url(test2.gif);}   
  7.     </style>  
  8. </head>  
  9. <body>  
  10.     <a href="#">  
  11.         <span>test</span>  
  12.         <span>test</span>  
  13.         <span>test</span>  
  14.         <span>test</span>  
  15.         </a>  
  16. </body>  
  17. </html>  


문제 2) 임의의 element에 css로 background-image 를 적용하였을 경우, onload이벤트 후에 해당 element나 그 상위 element의 style을 수정하면 해당 element에 적용된 background-image가 서버에 재요청되는 현상이 생긴다. 바꿔 말해서 onload 이후에 background-image가 적용된 부분을 포함하고 있는  element의 style을 바꾸면 해당 element와 그 하위에 있는 element들에 적용되어있는 모든 background-image가 - 같은 이미지 일지라도 element 수만큼 - 서버에 재요청 되는 현상이 생긴다.
-> 깜박거림, working cursor등이 동반될 수 있다.-> 깜박거림, working cursor등이 동반될 수 있다.

문제 코드2

  1. <html>  
  2. <head>  
  3. <title>test</title>  
  4.     <style type="text/css">  
  5.     #test { background-image: url(test1.gif); }   
  6.     span  { background-image: url(test1.gif); }   
  7.     </style>  
  8.     <script type="text/javascript">  
  9.     function init() {   
  10.         document.getElementById('test').style.position = 'relative'  
  11.         document.getElementById('test').style.top = '1px'  
  12.         document.getElementById('test').style.left = '2px'  
  13.     }   
  14.     </script>  
  15. </head>  
  16. <body onload="init()">  
  17.     <div id="test">  
  18.         <span>test</span>  
  19.         <span>test</span>  
  20.         <span>test</span>  
  21.         <span>test</span>  
  22.         <span>test</span>  
  23.     </div>  
  24. </body>  
  25. </html>  


문제1, 2를 완벽히 해결하는 방법.


사용자들에게 브라우저를 바꾸도록 강요할 수 있다면 IE6 이외의 브라우저를 사용하게 한다.
문자1, 2의 상황이 생기는 필요조건을 충족하지 않도록 코드를 바꾸는게 가능하다면 바꾼다.
  (ex. background-image를 사용하지 않은 css 혹은 img태그로 대체.)
하나마나한 얘기인가?. 그래도 모른다. 고민해보자.. 이 두가지가 가능한지.


문제1, 2가 일어나는 브라우저 범위를 줄이는 방법.

Internet Explorer 6 서비스 팩 1(Windows XP SP1) 이후의 브라우저에서는 "BackgroundImageCache" 라는 Command Identifier로 execCommand를 호출함으로써 이 문제들을 해결할 수 있다.
 - 서비스팩 2에서는 포함되어 있으며, 서비스 팩 1(6.00.2800.1106)은 update 유무에 따라 다를 수 있다.
- 브라우저 버젼 확인 방법 ( http://support.microsoft.com/kb/164539/ko )

document.execCommand("BackgroundImageCache", false, true);

이 생소한 BackgroundImageCache라는 녀석은 MSDN에서 제공하고 있는 Command Identifiers list
(http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/commandids.asp)에서도 찾을 수 없다.

MSDN KB를 뒤진 결과.
 Available memory decreases when you view a Web page in Internet Explorer 6 Service Pack 1 (http://support.microsoft.com/kb/823727) 에서 이 녀석에 대한 언급을 볼 수 있었다. 이 문서에서 말하고 있는 해당 hotfix의 원인과 설명은 보든 안보든 달라질게 없는 쓸모없는 내용이다. 또한 "Document.ExecCommand" 처럼 대소문자 규칙까지 어기고 있다. 여튼 이 너저분한 내용의 hotfix와 그 해결 방식은 치명적일수도 있는 결함에 대한 MS의 궁여지책 같은 냄새가 짙다.
결론은 Internet Explorer 6 서비스 팩 1 이후의 브라우저에서만 이 문제를 해결하고자 한다면,
BackgroundImageCache Identifier가 없는 브라우져에서 발생할 수 있는 예외를 무시할 수 있는 코드가 첨가된 아래 코드만으로 충분하다.

Internet Explorer 6 서비스 팩 1(Windows XP SP1) 이후 브라우저를 위한 해결.

  1. try {   
  2.     doument.execCommand("BackgroundImageCache"falsetrue);   
  3. catch(ignored) {}  

주의. 아래와 같은 해결방법에 대한 제시를 본적이 있다.

  1. html {   
  2.     filter: expression(document.execCommand('BackgroundImageCache', false, true));   
  3. }  
유사해 보이지만 다른 내용이다. 이 방식은 두가지 측면에서 좋지않다. 첫째는 BackgroundImageCache Identifier가 없는 브라우져에 대한 예외처리가 없다는 것이고, 둘째는 한번만 수행하면 되는 코드가 지속적으로 수행된다는 것이다.


구제받지 못한 IE6들을 위한 개선 방법

간단한 코드로 IE6 서비스팩 2와 서비스팩 1이후의 일부는 문제 대상에서 제외됐지만, 아직 서비스팩이 포함되지 않은 IE6가 방치되어 있다. 불행히도 이 브라우저들을 위한 간단한 해결책은 없는 듯하다. 그래서. 문제를 개선할 수 있는 방법을 정리한다.

개선 1. 브라우저와 서버의 통신을 줄인다.

방법 1.1. 사용자 브라우저의 임시 인터넷 파일 설정을 바꾸도록 한다.

브라우저의 임시 인터넷 파일 설정이 기본 설정값인 "페이지를 열때 마다" 일때 더 심각한 문제를 유발하므로 사용자에게 브라우저 설정을 바꾸는 것을 강요할 수 있는 상황이라면 그렇게 하라.


방법 1.2. 서버에서 expires나 cache-control헤더를 포함한 컨텐츠를 보내서 클라이언트의 local cache 사용을 유도한다.


* 서버설정 참고

- 아파치일 경우

httpd.conf 에 아래 내용을 추가

ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000

LoadModule expires_module modules/mod_expires.so

httpd.conf 를 수정할 수 없다면 자신의 .htaccess 파일을 수정한다. (단, mod_expires는 load되어 있어야한다)

설정방법 참고 : http://dean.edwards.name/my/flicker.html
mod_expires에 대한 설명 : http://httpd.apache.org/docs/2.2/ko/mod/mod_expires.html

- IIS일 경우

아래의 헤더를 추가
Cache-Control: post-check=3600,pre-check=43200

설정방법 참고 : http://www.aspnetresources.com/blog/cache_control_extensions.aspx


서버 설정을 할 수 없다면 웹 어플리케이션 작성시 expires나 cache-control헤더를 클라이언트에게 보내는 코드를 추가하라.
이 방법들은 컨텐츠를 서버에서 받아간 후, 파기(expire)되는 기간까지 서버에 재요청하지 않고 local cache를 사용하게 하는 일반적인 웹어플리케이션 성능향상 팁이기도 하다.

위에서 제공 것은 개선 방법임을 다시 한번 강조한다. 절대. 해결 방법이 아니다. 원격서버와의 통신을 줄어드나 local cache에 대한 불필요한 접근들은 일부 방치된다. 어떤 것들이 방치되는지 궁금하다면.. 브라우저 프로세스가 여는 파일 핸들들을 감시해보라.

개선 2. 문제1에서의 이미지 깜박거림을 감소시킨다.

이 부분은 아래의 링크에 수록된 잼있는(?) 내용을 전제로 한다.
Minimize Flickering CSS Background Images in IE6 
(http://www.fivesevensix.com/studies/ie6flicker/)

이 문서에서는 문제 1에서 발생하는 깜박거림에 대한 집요한 테스트 결과가 있다.

아래의 속성이 직접 적용되거나 상속되는 경우,
    background-color : transparent 이외의 값
    background-repeat : repeat 이외의 값
    background-position : 모든 값
또는
background-image가 적용된 element의 크기가 2500픽셀 미만일떄,
또는
투명 gif를 백그라운드 이미지로 사용했을때,

깜박거림 현상이 더 크게 발생하며

A태그의 상위엘리먼트에 같은 background-image를 지정해둠으로써 깜박 거림 현상을 감소시킬 수 있는 방법등을 제시하고 있다. 잼있는 개선방법중 하나지만 다른 개선이 배제된 상태에서의 이런 개선방법은 별로 추천하고 싶지는 않다.

개선 3. 문제2에 대한 개선

문제2에서의 특이한 사항은 특정 element의 style을 보정할때 style이 직접 대입되는 element는 그 대입횟수만큼 background-image를 다시 로딩하는 현상(download 혹은 local cache 접근) 이 생긴다는 것이다. 이와 달리 그것의 하위 element들은 상위element에 style이 대입되는 처음 시점에 단 한번의 불필요한 로딩만 다시 일어난다.

따라서 문제2를 조금 개선할 수 있는 방법은 style을 보정할 element에는 background-image css가 적용되어 있지 않게 하거나 뺄 수 없다면 불필요한 element로 싸는 정도의 간단하고 깔끔하지 못한 방법으로 문제를 축소시킬 수 있다.

모든 style 적용에서 테스트를 해본 것이 아니라. 항상 이 규칙이 적용된다는 보장은 할 수 없지만, 분명히 일반적인 위치이동 등의 처리에서는 개선되는 효과가 있다.

 

1. 출처 : http://blog.eloitcube.co.kr/27 
2. 출처 : http://fly32.net/25

 

댓글
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
제목 작성자 날짜
공대여자
공대여자
mins01
공대여자
공대여자
공대여자
공대여자
공대여자
공대여자
공대여자
공대여자
공대여자
공대여자
공대여자
공대여자
공대여자
공대여자
공대여자