web-dev-qa-db-fra.com

Fondu dans une image d'arrière-plan

J'ai une page Web qui utilise une grande image pour son arrière-plan. J'espérais utiliser jQuery pour charger l'image une fois téléchargée (essentiellement la façon dont bing.com charge son image d'arrière-plan). Est-ce possible avec jQuery? Si oui, existe-t-il un plugin que vous recommanderiez?

jquerybackground-image
20
Villager

Cette article peut être utile. Copie à partir de là:

[~ # ~] html [~ # ~] 

<div id="loader" class="loading"></div>

[~ # ~] css [~ # ~] 

DIV#loader {
  border: 1px solid #ccc;
  width: 500px;
  height: 500px;
}

/** 
 * While we're having the loading class set.
 * Removig it, will remove the loading message
 */
DIV#loader.loading {
  background: url(images/spinner.gif) no-repeat center center;
}

Javascript 

// when the DOM is ready
$(function () {
  var img = new Image();

  // wrap our new image in jQuery, then:
  $(img)
    // once the image has loaded, execute this code
    .load(function () {
      // set the image hidden by default    
      $(this).hide();

      // with the holding div #loader, apply:
      $('#loader')
        // remove the loading class (so no background spinner), 
        .removeClass('loading')
        // then insert our image
        .append(this);

      // fade our image in to create a Nice effect
      $(this).fadeIn();
    })

    // if there was an error loading the image, react accordingly
    .error(function () {
      // notify the user that the image could not be loaded
    })

    // *finally*, set the src attribute of the new image to our image
    .attr('src', 'images/headshot.jpg');
});
11
kgiannakakis

Vous pouvez d'abord charger l'image, puis, une fois le chargement terminé, la définir comme image d'arrière-plan. De cette façon, le navigateur chargera (espérons-le) l'image d'arrière-plan du cache au lieu de la télécharger à nouveau. Comme vous l'avez demandé en tant que plugin:

 $.fn.smartBackgroundImage = function(url){
  var t = this;
  //create an img so the browser will download the image:
  $('<img />')
    .attr('src', url)
    .load(function(){ //attach onload to set background-image
       t.each(function(){ 
          $(this).css('backgroundImage', 'url('+url+')' );
       });
    });
   return this;
 }

Utilisez-le comme ceci:

 $('body').smartBackgroundImage('http://example.com/image.png');
25
Pim Jager

Vous ne pouvez pas utiliser d'images d'arrière-plan CSS, car il est impossible d'attacher un événement au chargement des images (pour autant que je sache).

Je vais donc essayer, mais je ne l'ai pas testé:

HTML:

<body>
<div class="bgimage"><img src="/bgimage.jpg" ></div>
<div>
  ... content ...
</div>
</body>

CSS:

.bgimage { position: absolute: }

Javascript:

$(function() {
   $(".bgimage")
      .css("opacity",0);
      .load(function() { $(this).fadeIn(); });
});
1
Philippe Leybaert