平铺异步加载的图片-卡在与背景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的background属性？

// 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 +'”）左上方重复'）;

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