jquery - 平铺异步加载的图像 - 卡在 <img> 和背景 URL 之间

Question

对于一个有很多小缩略图的网站，我想在加载每张图片时使用占位符 gif。这需要如下代码:

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

这很好用，在样式表中指定了占位符，但我希望能够平铺这些图像，如果它们太短或太窄，背景 CSS 是做到这一点的明显方法，但它与异步图像加载，afaik。

我的问题:是否有任何 jQuery(或 CSS3)可用于平铺 <img>标签？

或者，有没有办法异步加载图像，然后将其粘贴到背景 css 属性中？这听起来有点太神奇了，但也许行得通。

Answer 1

你能发布你的 html 标记结构吗？否则是盲目的，但是您是否尝试修改包含 div 的背景属性？

// 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','transparent url("'+$this_src+'") top left repeat');

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