단일 이미지 Jquery Preloader

현재 개발중인 웹 사이트에서 상당히 큰 배경 이미지를 사용하고 있습니다. 현재 배경색이로드되고 이미지로드가 완료되면로드됩니다. 그건 완벽하게 괜찮습니다. 그러나, 나는 프리 로더 GIF 배경 이미지를로드 할 때까지 회전 한 다음에 페이드 효과를 달성하기 위해 노력하고 있습니다. 현재 여기단일 이미지 Jquery Preloader

$(document).ready(function(){ 
    $('span.loader').show();  
    $("body").css('background-image','url(images/bg.jpg)').ready(function(){ 
     $("span.loader").hide(); 
    }); 
});

이 밤은 내가 원하는 일을 (전혀 작동 밤은) 내 jQuery를하다 - 배경색을로드시에 표시하고 로더를 span.loader 내에 표시하고 싶습니다. 본문의 배경 이미지가 로딩되면, 페이드 인 (로더 위에 또는 로더를 숨김)으로 표시하고 싶습니다. 어떤 아이디어?

body{background:url(images/bg.jpg) 50% 0 no-repeat #e6f8bb; font-family:'Arvo'; sans-serif;} 
span.loader{position:absolute; top:39px; left:484px;height:31px; width:31px; background-image:url(images/loader.gif); display:none;}

출처

2011-03-05 JCHASE11

본체 크기가 아닌 DIV가 회 전체와 함께 배경색으로 설정되어있는 경우 (본체 대신) 바디 배경을 추가하고 DIV의 투명도를 천천히 높이면 완전히 투명 해져서 제거됩니다 그것. 이 DIV의 Z- 색인을 본문보다 높게 설정해야하지만 페이지의 내용보다 낮게 설정해야합니다.

그런 다음 @ Groovetrain의 계시를 사용하여 노출이 실행되도록 이미지가로드되었는지 확인할 수 있습니다.

body{background-color: #e6f8bb; font-family:'Arvo'; sans-serif;} 
body.loaded {background:url(images/bg.jpg) 50% 0 no-repeat #e6f8bb;} 
div.reveal{position: absolute; height: 100%; width: 100%; z-index: 1; background-color: #e5f8bb;}; 
span.loader{position:absolute; top:39px; left:484px;height:31px; width:31px; background-image:url(images/loader.gif); } 
#content { z-index: 2 } 

<script type="text/javascript"> 
    $(function() { 
     var img = new Image(); 
     $(img).hide().load(function() { 
      $('body').addClass('loaded'); 
      $('.reveal').animate({opacity:0}, function() { 
       $(this).remove(); 
      }); 
     }); 
     img.src = "/images/bg.jpg"; 
    }); 
</script>  

<body> 
<div class="reveal"> 
    <span class="loader">&nbsp;</span> 
</div> 
<div id="#content"> 
... 
</div> 
</body>

출처

2011-03-05 19:40:36 tvanfosson

나는이 아이디어가 정말 마음에 든다. 그러나 div 클래스 공개는 body가 "loaded"클래스로 할당되지 않았기 때문에 0 불투명도로 다시 움직이는 것처럼 보이지 않는다. 수업이 추가되지 않는 이유는 무엇입니까? – JCHASE11

왜 fadeOut (function() {$ (this) .remove()})를 수행하지 않는 것이 좋을까요? 대신? – Groovetrain

예, 문제는 아니지만 배경 이미지가로드되지 않습니다. 바디에로드 된 클래스가 할당되지 않았기 때문입니다 ... jsfiddle을 함께 넣을 아이디어가 없으면 – JCHASE11

을 해부 많은 시간을 소비하지 않고 span.loader에 display:none는 정확히하지 않을 것입니다 : 다음은 내 기본 CSS는 무엇입니까? 그걸 제거하면 어떻게됩니까?

출처

2011-03-05 19:17:52 Steve

'페이드'되지 않지만 새 배경 이미지가 표시되고 여기에 load() 콜백에 스팬 및 페이드 아웃 될 수있는 회 전자가 숨겨집니다. 내가 여기 당신을 위해 발견 뭔가에서 : http://jqueryfordesigners.com/image-loading/ 당신의 CSS에서

은, 몸, 스피너를 보여줍니다 하나에 대한 규칙을 가지고, 당신은 실제로 배경 이미지 설정합니다 나중에 추가 할 수 있습니다 :

body.image-loading {background-image: url('images/spinner.gif'); } 
body.image-loaded { background-image: url('images/bg.jpg'); }

을

다음 jQuery에서 :

$(function() { 
    $('body').addClass('image-loading'); 

    var img = new Image(); 
    $(img).load(function() { 
    $(this).hide(); 
    $('body').removeClass('image-loading') 
     .addClass('image-loaded'); 
    }) 
    .attr('src', 'images/bg.jpg');; 
});

출처

2011-03-05 19:24:18 Groovetrain

어떤 시점에서 이미지 src을 배경 이미지 URL로 설정해야합니다. 그렇지 않으면로드 이벤트가 실행되지 않습니다. – tvanfosson

@tvanfosson right. 편집 됨. 감사! – Groovetrain

답변

관련 문제