지연을 로드의 특정 css 배경 이미지

StackOverflow https://stackoverflow.com/questions/506126

문제

에서 CSS 다음과 같다:

...
#big-menu {
    background: #fff url(../images/big-menu.jpg) no-repeat;
}
#some-menu {
    background: #fff url(../images/some-menu.jpg) no-repeat;
}
#some-other-menu {
    background: #fff url(../images/some-other-menu.jpg) no-repeat;
}
...

하는 방법이 있는 지연의 로딩 #big-menu의 배경 이미지,그래서 그것이드 후 다른 모든 것을 포함한 모든 이미지에서는 HTML,다른 모든 CSS 배경( some-menu 고 some-other-menu).

는 이유입니다,big-menu.jpg 은 아주 무거운 크기에,나는 그것을 로드 마지막입니다.후에도,그것은 단지 제공하는 눈-,사탕과 다른 배경 이미지는 더 나은 사용합니다.(등에 사용되는 것 버튼 사용)

가의 순서에 넣어 CSS 또는 발생의 태그(#big-menu)에서 HTML 을 가지고 아무것도 할 무엇으로 얻을 로드 첫 번째?또 거기에 더 많은 신뢰할 수 있는 방법을 제어요?javascript(jQuery 선호)괜찮습니다.

도움이 되었습니까?

해결책

주문에서 css 를 제어하지 않는 리소스는 먼저 로드,하지만 어떤 영향을 미칠 기존의 스타일을 덮어쓰거나 상속됩니다.

Try JavaScript onload 이벤트입니다.이벤트를 실행한 후에만 페이지 로딩이 완료.

function loadBG(){
    document.getElementById("big-menu").style.backgroundImage="url(../images/big-menu.jpg)";
}
window.onload=loadBG();

다른 팁

이것은 완벽한 솔루션이 아닐 수도 있습니다 (CSS 백 지상이고 이미지가 아닌). Yui 이미지 로더 게으른로드 이미지의 좋은 방법을 제공합니다.

그룹을 만듭니다

var imgGroup = new YAHOO.util.ImageLoader.group(window, 'load', 2);

문서가로드되면 이미지가 2 초 후에로드됩니다. 보다 야후! 빛나는 아니면 그 예 데모 용.

또 다른 솔루션은 자산을 다른 도메인으로 분할하는 것입니다. 브라우저는 시간에 두 개의 자산 만 요청 한 다음 다음을 시작하기 전에 하나를로드 할 때까지 기다립니다. 당신은 이것을 관찰 할 수 있습니다 개똥 벌레 그리고 yslow, 따라서 images.example.com 및 images 1.example.com에 자산을 배치하고 그것이 영향을 미치는지 확인합니다.

적용되는 요소의 순서가 먼저로드 될 이미지를 결정하기 때문에 Styelsheet에 배치가 영향을 미칠 것이라고 생각하지 않습니다.

jQuery를 사용하여 올바른 시퀀스로 이미지를로드 할 수 있습니다.

$('firstElement').addClass('some-menu');
$('secondElement').addClass('some-other-menu');
$('lastElement').addClass('big-menu');

편집하다:자, 그렇다면 클래스를 추가하는 대신 더 나은 솔루션은 런타임에 백그라운드 이미지를 추가하는 것입니다.

$('firstElement').css("background-image", "some-menu.jpg");
$('secondElement').css("background-image", "some-other-menu.jpg");
$('lastElement').css("background-image", "big-menu.jpg");

제어 때는 이미지 부 CSS 에서 정말 가능합니다.당신이 시도할 수 있습 그것의 맨 아래에서 당신의 스타일이지만 난 당신이 볼 수 있는 개선합니다.

순서 다운로드할 수 없을 사용하여 제어 css.그러나 당신이 자바 스크립트를 사용할 수 있습니다 중요한 부분입니다.

직접 관련되지는 않지만 질문에 어쩌면 하기 전에 해야 하는 최적화 이미지를 사용하여 smush.그것은 또는 당신의 마음에 드는 이미지 프로그램은 내가 찾는 jpeg 파일이 아주 좋아 보이는 저장할 때 85%품질입니다.실험과를 설정하는 것을 잊지 마십시오 귀하의 웹 서버를 캐시미 오랜 기간 동안 다음에 문제가 될 것입니다 처음에 사용자는 사이트로 이동합니다.

Jason의 JavaScript 트릭은이 문제를 해결하는 데 도움이되었습니다. 그러나 구문을 약간 수정해야했습니다.

function loadBG(){
     document.getElementById("big-menu").style.backgroundImage="url(../images/big-menu.jpg)";
}
window.onload=loadBG();
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top