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

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

2 голосов
/ 12 августа 2010

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

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

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

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

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

Ответы [ 2 ]

0 голосов
/ 12 августа 2010

Вы можете создавать свои свойства 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>

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

0 голосов
/ 12 августа 2010

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

Пример: 

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>

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...