Single Image Jquery Preloader

J'utilise une assez grande image de fond sur un site web que je développe. Actuellement, la couleur d'arrière-plan se charge et lorsque l'image est chargée, elle se charge. C'est parfaitement bien; cependant, je suis en train de réaliser un effet où un gif préchargement tourne jusqu'à ce que les charges d'image d'arrière-plan, puis disparaît dans. À l'heure actuelle, voici mon Jquery (ce qui isnt fonctionne pas du tout)Single Image Jquery Preloader

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

Ce isnt faire ce que je veux - Je veux que la couleur de fond apparaisse au chargement et affiche un chargeur au sein de span.loader. Lorsque l'image d'arrière-plan du corps est chargée, je veux qu'il apparaisse (soit sur le chargeur, soit en cachant le chargeur). Des idées? Ci-dessous ma base css:

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;}

Source

2011-03-05 JCHASE11

Et si vous aviez un DIV à la couleur d'arrière-plan avec le spinner (au lieu de sur le corps), puis simplement ajouté le fond du corps et augmenté lentement la transparence du DIV jusqu'à ce qu'il soit complètement transparent, puis enlevé il. Vous devez définir l'index z de cette DIV plus haut que le corps, mais plus bas que le contenu de la page. Ensuite, vous pouvez utiliser l'astuce de @ Groovetrain pour vérifier que l'image est chargée pour déclencher la révélation.

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>

Source

2011-03-05 19:40:36 tvanfosson

J'aime vraiment cette idée ... cependant la div div révèle ne semble pas revenir à une opacité 0, car le corps n'était pas assigné à la classe "chargée". Une raison pour laquelle la classe n'est pas ajoutée? – JCHASE11

Pourquoi ne pas simplement faire un fadeOut (function() {$ (this) .remove()}); Au lieu? – Groovetrain

oui, pas un problème, mais l'image d'arrière-plan n'est même pas en cours de chargement, car le corps n'est pas assigné la classe de chargé ... si vous n'avez pas d'idées je vais mettre un jsfiddle ensemble – JCHASE11

sans dépenser beaucoup de temps disséquer, ne serait pas le display:none sur span.loader faire exactement cela? Que se passe-t-il si vous supprimez cela?

Source

2011-03-05 19:17:52 Steve

Il ne va pas «fondre», mais il affichera la nouvelle image d'arrière-plan et cachera le spinner (que vous pouvez probablement mettre dans un span et disparaître dans le rappel load() ici. de quelque chose que je trouve pour vous ici: http://jqueryfordesigners.com/image-loading/

Dans votre css, ont une des règles pour le corps, qui montrera la fileuse, et que vous pouvez ajouter plus tard qui établira effectivement l'image de fond:

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

Puis dans 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');; 
});

Source

2011-03-05 19:24:18 Groovetrain

Vous devez définir l'image src à l'image de fond url à un moment ou l'événement de chargement ne se déclenche pas. – tvanfosson

@tvanfosson à droite. Édité. Merci! – Groovetrain

Single Image Jquery Preloader

Répondre

Questions connexes