Как я могу отложить загрузку фоновых изображений CSS?

Я анимирую спрайты в игре HTML/JavaScript, показывая/скрывая/переставляя много div, каждый с фоном изображения CSS.Как я могу отложить загрузку фоновых изображений CSS?

Я хотел бы загрузить некоторые изображения только тогда, когда они нужны в первую очередь, вместо того, чтобы загружать их все, когда страница загружается впервые.

Будет ли устанавливать их все на "display: none" изначально, а затем показывать/скрывать их с помощью "display: inline" сделать это?

Или я должен добавить и удалить divs по мере необходимости? Или есть другой способ сделать это?

(я уже оптимизированы размеры файлов изображений с использованием различных инструментов, так что этот вопрос конкретно о поиске способа загрузки изображений по мере необходимости с HTML/JS, а не все сразу.)

источник

2010-08-11 coffee-grinder

Вы можете сделайте это, сохранив URL-адреса для фоновых изображений в ассоциативном массиве и извлекая их, когда вы хотите применить их к стилю backgroundImage.

Пример:

var resources = {div1:"url(image1.png)",div2:"url(image2.png)",div3:"url(image3.png)"}; 

function loadImageBG(id) { 
    document.getElementById(id).style.backgroundImage = resources[id]; 
}

где

<div id="div1"></div> 
<div id="div2"></div> 
<div id="div3"></div>

являются дивы, которые вы хотите поставить фоновые изображения для.

источник

2010-08-11 20:58:16 Robusto

Nitpick: термин в JavaScript будет «объектом», а не «ассоциативным массивом». –

@Paul D. Waite: http://www.quirksmode.org/js/associative.html Я знаю название этого термина. Я использовал «ассоциативный массив», чтобы проиллюстрировать точку и научить принципу. Я мог бы так легко (и правильно) назвать его хешем. Если я позвоню своей машине «моя поездка», вы знаете, о чем я говорю, и вы знали, о чем я говорю здесь. – Robusto

О, честная игра, я просто подумал, что термин «массив» может запутать здесь, учитывая, что JavaScript имеет конкретный объект, называемый массивом. Вы правы, хотя это практически не имеет значения. –

Динамические свойства CSS можно создавать с помощью Javascript вместо статического файла .css.

Ниже приведен пример для добавления и удаления стилей:

<html> 
<head> 
    <title>add/remove style</title> 
    <script> 
     function removeStyle(id){ 
      var cs = document.getElementById(id); 
      cs && cs.parentNode.removeChild(cs); 
     } 
     function addStyle(css, id){ 
      removeStyle(id); 
      var styleNode = document.createElement("style"); 
      styleNode.setAttribute('type', 'text/css'); 
      styleNode.setAttribute('id', id); 
      document.getElementsByTagName("head")[0].appendChild(styleNode); 
      if(typeof styleNode.styleSheet !=='undefined'){ 
       styleNode.styleSheet.cssText = css; //IE 
      }else{ 
       styleNode.appendChild(document.createTextNode(css)); 
      } 
     } 
    </script> 
</head> 
<body> 
    <p>text to color</p> 
    <input onclick="addStyle('p{color:#900}p{background:#DEF}', 'myStyle')" 
     type="button" value="add style" > 
    <input onclick="removeStyle('myStyle')" type="button" value="remove style"> 
</body> 
</html>

Функции/removeStyle addStyle, вероятно, придется доработать в вашем случае, но вы получите внутри важные функции таблицы стилей для использования.

источник

2010-08-11 22:09:54 Mic

Как я могу отложить загрузку фоновых изображений CSS?

ответ

Смежные вопросы