서버가 다운되었을 때 스타일 이미지를 미리로드하는 방법은 무엇입니까?

Question

알람 LED 그림이있는 서버 상태를 나타내는 javascript 위젯이 있습니다. 그림은 정의 된 CSS에 적절한 스타일로 DOM 요소에 적절한 클래스를 적용하여 선택합니다.

문제는 서버가 다운되면 스타일에 대한 이미지 파일을 제공 할 수 없다는 것입니다. 그래서, 제 버튼은 그냥 비어있는 것처럼 보입니다.

질문 : 브라우저 캐시에 이미지를 미리로드하여 서버가 다운되었을 때 이미지를 표시하고 표시하는 방법은 무엇입니까?

Answer 1

당신은 src의 경로를 img 요소를 생성하고 할당하여 이미지를 미리로드 할 수 있습니다

var img = document.createElement('img'); 
img.src = "/path/to/image"; 

는 그 캐시에 넣어 것입니다. 나는 당신이 심지어 그것을로드 브라우저의 DOM에 넣어 생각하지 않지만, 당신이 절대적으로 확인하려는 경우, 당신은이 수행 할 수 있습니다 오프 페이지를로드

img.style.position = "absolute"; 
img.style.left = "-10000px"; 
document.body.appendChild(img); 

을하지만, 사용자는 그것을 볼 수 없습니다. 실제로 이미지를 표시하는 요소를 사용하여 요소를 수행 한 다음 요소를 표시 할 때 필요한 위치로 이동하여 브라우저에서 GET을 If-Modified-Since과 함께 보내지 않도록 할 수 있습니다. 당신은 그것을 보여주고 있지만, 이론적으로 캐시 헤더가 정확하다면 브라우저는 원하지 않을 것입니다.

Answer 2

이미지를 미리 캐시하는 데 사용할 수있는 모든 고급 방법이 있지만 간단한 경로로가는 것이 좋습니다.

나는 다음 중 하나를 수행 것 :

1. 를 사용하여 간단한 스타일을 경고 효과를 만드는 (큰 테두리, 밝은 빨강 등)
2. 이 (신뢰성)에 이미지를 업로드를 써드 파티 서비스. 몇 가지가 있습니다. 아마도, 그건 당신이이 프로젝트를 모니터링하기 위해 노력하고 무엇을 때

그런 식으로, 당신은 당신의 코드 또는 작동하도록 경고에 대해 올바르게 작동하는 서버에 의존 아니에요.

Answer 3

data : image에서 배경을 정의 할 수 있습니다. 확인 : here 또는 here