1
之间对于很多的小缩略图的网站,我想用一个占位符,GIF,而每个图像加载。这需要像下面的代码:平铺一个异步加载图像 - 把一个<img>和背景URL
$('.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是显而易见的方式做到这一点,但它无法与异步图像加载兼容的,据我所知。
我的问题:有没有可用于平铺<img>
标记的jQuery(或CSS3)?
或者,有没有办法做一个形象的台异步加载,然后将其粘贴到后台的CSS属性?这听起来有点太神奇了,但也许它有用。
这是一个很好的答案,但目标是等到图像完成下载后,我发布的JS代码才会这样做。据我所知,没有办法与背景图像属性来做到这一点。 – jamtoday 2009-07-30 03:00:44