CSS 이미지가로드 된 것을 어떻게 감지합니까?

-1

배경 (반복되는 이미지)에 이미지 텍스처를 사용하고 있으며 스프라이트 시트도 사용하고 있습니다. 이 모든 것은 CSS를 통해로드됩니다.CSS 이미지가로드 된 것을 어떻게 감지합니까?

내가 부하 후 이미지에 페이드 $(window).load()를 사용하여 시도했지만, 당신은 여전히 렌더링 /로드을 볼 수 있습니다.

$(window).load()은 DOM의 이미지에만 적용됩니다.

CSS 이미지가로드 된 것을 감지하는 방법이 있습니까?

2015-02-03 Vongdarakia

당신의 대답은 내가 믿는 (tldr : 아니오) : http://stackoverflow.com/questions/1927610/how-to-verify-background- 없습니다 css-image-was-loaded – below9k

나는 CSS를 통해 그렇게 할 수 없다고 생각합니다. googol이나 smth하려고 했습니까? – knitevision

제목에 "CSS를 통해로드되었는지 확인"하고 태그에 "jquery, callback"이있는 이유는 무엇입니까? – knitevision

프리 로더를 사용하면 모든 요소가로드 될 때까지 페이지의 모든 콘텐츠를 숨길 수 있습니다.

HTML

<div id="preloader"> 
     <div id="status"></div> 
    </div> 



<script type="text/javascript"> 
    //<![CDATA[ 
     $(window).load(function() { 
      $('#status').fadeOut(); 
      $('#preloader').delay(350).fadeOut('slow'); 
      $('body').delay(350).css({'overflow':'visible'}); 
     }) 
    //]]> 
</script>

CSS :

#preloader { 
    position: fixed; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    background-color:#aed0de; /* change if the mask should have another color then white */ 
    z-index:7; /* makes sure it stays on top */ 
} 

#status { 
    width:400px; 
    height:418px; 
    position:absolute; 
    left:50%; /* centers the loading animation horizontally one the screen */ 
    top:50%; /* centers the loading animation vertically one the screen */ 
    background-image:url(../images/status.gif); /* path to your loading animation */ 
    background-repeat:no-repeat; 
    background-position:top; 
    margin:-209px 0 0 -200px; /* is width and height divided by two */ 
    text-align:center; 
    text-transform:uppercase; 
    font-size:1.6em; 
    font-weight:bold; 
    letter-spacing:0.1em; 
    color:#3d6a7c; 
    text-shadow: 4px 4px 2px rgba(150, 150, 150, 0.3);

출처

2015-02-03 21:31:06 Axwell

CSS 이미지가로드 된 것을 어떻게 감지합니까?

답변

관련 문제