Как вы обнаруживаете, что загружается изображение CSS?

Question

Я использую текстуру изображения для фона (это повторяющееся изображение), и я также использую лист спрайтов. Все они загружаются через CSS.

Я попытался использовать $(window).load(), чтобы исчезнуть в изображениях после загрузки, но вы все еще можете увидеть его рендеринг/загрузка.

Я начинаю думать, что $(window).load() работает только для изображений в DOM.

Есть ли способ обнаружить, что загружается изображение CSS?

Answer 1

Вы можете использовать preloader, чтобы скрыть весь контент на вашей странице, пока все элементы не загрузятся. не

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);