2011-11-10 3 views
1

내가 만들고있는 웹 사이트는 웹 사이트가로드 될 때 큰 이미지가 검은 색으로 희미 해집니다. 그것은 좋은 품질의 이미지이고 그 효과는 훌륭합니다.브라우저에서 아무것도 나오기 전에 큰 이미지를로드하는 방법

문제는 사람이 웹 사이트를 처음 방문 할 때 페이드가 발생하지 않고 이미지가 나타납니다. 나는 불투명도가 즉시 바뀌었지만 이미지 자체는 다운로드되지 않은 것으로 생각합니다. 일단 캐싱되면 사이트를 다시 방문하면 그 효과가 나타납니다.

페이드 인이 시작되기 전에 이미지가 완전히 다운로드되도록하는 방법은 무엇입니까 (페이드는 단순한 jQuery : $('#bg').fadeIn(1000);)?

수정 - 모두에게 감사드립니다. 그것은 해결되었습니다. 나는 내가 중요하지 않다는 것을 깨닫지 못한 것을 남겼다. img 태그가 아니고 이미지 배경이 div입니다. 내가 img로 바꿨을 때, $(document).ready() 함수는 페이드 전에 이미지를로드했습니다. 고맙습니다!

+0

를 사용하여 쉽게 생각하고 당신이 필요로하는 경우 언급 할 사람을 발견 'ready()'대신'load()'를 사용해야하는로드 된 엘리먼트의 프로퍼티. 나는 나 자신을 시험해 보지 못했지만 어쨌든 그것을 통과 할 것이라고 생각했다. (단지를 위해서!) 편집 : 즉, document.ready 대신 window.onload! – Gazillion

+0

@Gazillion 그래, 나는 항상 ready()를 사용했다. 그러나 load()는 훨씬 더 적절하다. –

답변

2

jQuery에서 .load() event handler을 살펴보십시오. 연결된 요소의 모든 항목이로드되면 호출됩니다. 이미지에 태그에 태그를 첨부하면 이미지가 완전히로드 될 때 콜백이 호출됩니다.

+0

ready() 함수가 트릭을 했음에도 이미지를 빠르게 출력하면서 load()를 사용했다. 고맙습니다. –

+0

@ user745434 : 환영 합니다만, DOM 구성시 [[.ready()'] (http://api.jquery.com/ready/)가 호출됩니다. 페이지 요소 (이미지 등 .)가로드되지 않았습니다. 동일한 페이지에서 다음을 읽을 수 있습니다 : "코드가로드 된 자산에 의존하는 경우 (예 : 이미지의 크기가 필요한 경우) 코드는 [load 이벤트] (http : //api.jquery.com/load-event/) 대신 ._ "을 사용하십시오. – Tadeck

1

당신은 HTML의 상단에있는 IMG를로드하는 스크립트 (HEAD 옵션에) 넣어해야

하지만

그에게 나쁜 관행.

기본 페이지를 만들 수 있으며 버튼 스크립트에서 img 및로드 이벤트를 다운로드 할 수 있습니다.

관련 문제