CSS 배경 이미지로드를 지연시키는 방법은 무엇입니까?

CSS 배경 이미지가있는 많은 div를 표시/숨기기/위치 변경하여 HTML/JavaScript 게임에서 스프라이트에 애니메이션을 적용하고 있습니다.CSS 배경 이미지로드를 지연시키는 방법은 무엇입니까?

이미지를 처음로드 할 때 페이지를 처음로드 할 때 이미지를 모두로드하지 않고로드하는 것이 좋습니다.

처음에는 모두 "display : none"으로 설정 한 다음 "display : inline"으로 표시/숨기기를할까요?

또는 필요에 따라 div를 추가하고 제거해야합니까? 아니면 다른 방법이 있습니까?

(난 이미 다양한 도구를 사용하여 이미지의 파일 크기를 최적화, 그래서이 문제는 한 번에 HTML/JS가 아니라 모두와 함께 필요에 따라 이미지를로드 할 수있는 방법을 찾는 것에 대해 특별히입니다.)

출처

2010-08-11 coffee-grinder

당신은 할 수 있습니다 연관 배열에 배경 이미지의 URL을 저장하고 div의 backgroundImage 스타일에 적용하려는 경우이를 검색하여이를 수행하십시오.

예 :

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

은 당신이 배경 이미지를 제공하고자하는 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]; 
}

출처

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>

addStyle/removeStyle 기능은 귀하의 경우 약간의 재 작업이 필요 아마하지만 중요한 스타일 시트 기능을 사용하여 내부에 당신이 얻을.

출처

2010-08-11 22:09:54 Mic

CSS 배경 이미지로드를 지연시키는 방법은 무엇입니까?

답변

관련 문제