Tiling ein asynchron geladenes Bild - steckte zwischen einer und einer Hintergrund-URL

Question

Für eine Website mit vielen kleinen Miniaturbildern, wollte ich einen Platzhalter gif verwenden, während jedes Bild Laden war. Dies erfordert Code wie folgt aus:

  $('.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);

Das funktioniert gut, mit dem Platzhalter im Stylesheet angegeben, aber ich möchte diese Bilder auf Fliese können, wenn sie zu kurz sind oder verengen und Hintergrund CSS ist die offensichtliche Art und Weise, das zu tun, aber es ist nicht kompatibel mit asynchrones Laden von Bildern, afaik.

Meine Frage: Gibt es eine jQuery (oder CSS3), die einen <img> Tag Kachel verwendet werden können?

oder alternativ ist es eine Möglichkeit, asychronous Laden eines Bildes zu tun und es dann bleiben in den Hintergrund CSS-Attribut? Das klingt ein wenig zu magisch, aber vielleicht funktioniert es.

Answer 1

Können Sie Ihre HTML-Markup-Struktur veröffentlichen? Im Blind sonst, aber haben Sie versucht, das enthält div ‚s Hintergrund Eigenschaft modifyu?

// 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 ( 'Hintergrund', 'transparent url ( " '+ $ this_src +'") links oben wiederholen');

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