CSS - 배경으로 큰 이미지 사용 (성능)

사이트 성능에 대한 질문이 있습니다. 4 가지 큰 이미지 (1920 * 500px)가있어 홈 페이지에 표시해야 할 슬라이드가 있습니다. 다음 이미지를 보려면 클릭해야하며 슬라이드 쇼가 아닙니다. 홈 페이지가로드되면 첫 번째 이미지 만 보이고 나머지는 사용자 요청시에만 볼 필요가 있습니다. 내 질문은 다음입니다. 하나의 큰 이미지 (스프라이트)를 만들어 배경 인 (이 이미지는 centar에 초점을두고 있으며이 해상도를 지원하는 디스플레이를 가진 사용자는 홀 이미지를 볼 수 있습니다. 그런 종류의 디스플레이가 최대한 많이 보일 것입니다.) 표준 img 태그를 사용하거나이를 수행하는 더 좋은 방법이 있습니까?CSS - 배경으로 큰 이미지 사용 (성능)

출처

2012-12-19 Sasha

스프라이트를 사용하는 이점은 당신이 HTTP 요청을 저장하고 (예를 들어, 응답 이미지 롤오버에 필수적인) 이미지를 사전로드되어있을 때 당신은 또한 JS와 배경 이미지를 변경할 수 있습니다.

귀하의 경우에는 스프라이트가 의미가 있다고 생각하지 않습니다. 먼저, 세 개의 HTTP 요청 (페이지를로드 할 때 첫 번째 이미지가 표시 될 가능성이 높음) 만 저장하면 모든 방문자가 큰 이미지를 보지 않아도 다운로드하게됩니다.

출처

2012-12-19 00:57:41

글쎄, 그게 내가 생각하는 방법이지만, ** img ** 태그를 사용하면 같은 일이 일어난다. 모든 이미지는 한 번에 하나씩로드 될 것이다. 둘째, 사용자가 1920px보다 작은 해상도로 디스플레이 할 경우 어떻게 이미지를자를 수 있습니까? 이것은 백그라운드에서 상대적으로 쉽지만, 다시 한번 사용자는 하나의 커다란 스프라이트를로드해야합니다. – Sasha

배경 이미지가 다른 여러 div를 사용하거나 javascript를 사용하여 단일 div의 배경 이미지를 변경하십시오. 스프라이트는 사용하지 마십시오. –

내가 할 수있는 최선의 방법이 될 것 같아. 페이지 끝 부분에 표시되지 않는 div에 대한 규칙을 넣을 수 있으며 사용자를 대기시키지 않습니다. 아이디어 주셔서 감사합니다 :) – Sasha

Im 무엇인지 모르겠다.하지만 항상 이미지 중 하나를 렌더링하면 다음과 같이 전체 화면 배경 이미지를 만드는 것이 현명 할 수 있습니다. 필요한

<style> 
html 
{ 
    background: url("your image") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    opacity:1; 
} 
</style>

출처

2012-12-19 00:52:21

이것은 좋은 생각입니다. 나는 그것을 시도 할 것이다. – Sasha

jQuery로 클래스를 변경하십시오.

.bg-1 { background: url("your image") no-repeat center center fixed; } 
.bg-2 { background: url("your image 2") no-repeat center center fixed; } 
.bg-3 { background: url("your image 3") no-repeat center center fixed; }

출처

2012-12-19 01:29:12

CSS - 배경으로 큰 이미지 사용 (성능)

답변

관련 문제