Mise en mosaïque d'une image chargée de façon asynchrone - coincée entre un <img> et une URL d'arrière-plan

Question

Pour un site comportant beaucoup de petites images miniatures, je souhaitais utiliser un espace réservé GIF pendant le chargement de chaque image. Cela nécessite un code comme suit:

$('.this_img').each(function(){ 
    var $this_img = $(this); 
    var $this_src = $(this).find('.sliderImage:first').attr('src'); 
    var img = new Image(); 
    // wrap our new image in jQuery, then: 
    $(img) 
    // set minimum dimensions 
    .css({ 
    'min-height': '35px', 
    'min-width': '40px' 
    }) 
    // once the image has loaded, execute this code 
    .load(function() { 
    // set the image hidden by default  
    $(this).hide(); 

    // with the holding div #loader, apply: 
    $this_img 
     // remove the loading class (so no background spinner), 
     .removeClass('loading') 
     // then insert our image 
     .prepend(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', $this_src); 

Cela fonctionne bien, avec l'espace réservé spécifié dans la feuille de style, mais je voudrais être en mesure de tuiles ces images si elles sont trop courtes ou étroites et CSS de fond est la manière évidente de faire cela, mais ce n'est pas compatible avec le chargement d'image asynchrone, afaik.

Ma question: Y a-t-il des jQuery (ou CSS3) qui peuvent être utilisés pour paver un tag <img>? Ou bien, existe-t-il un moyen de charger asynchrone d'une image, puis de la coller dans l'attribut css d'arrière-plan? Cela semble un peu trop magique, mais peut-être que ça fonctionne.

Answer 1

Pouvez-vous publier votre structure de balisage html? Dans le cas contraire, avez-vous essayé de modifier la propriété d'arrière-plan de div contenant?

// your callback function 

function() { 
    // set the image hidden by default  
    $(this).hide(); 

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

Css ('background', 'url transparente (" '+ this_src $ +'") en haut à gauche répétition');

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