JS/jQuery:加载背景图片
问题描述:
我有这样的功能,应该等待直到加载背景图像,然后将图像的比例添加到它的容器并淡入背景图像容器中。它似乎在Chrome中工作,但在Internet Explorer中失败8和9,并不总是在10中工作。在ie8似乎不了解jquery('load')事件。在ie 9和10中,它并不总是找到背景图像的宽度。我如何使它在ie8 +和其他主流浏览器中工作?JS/jQuery:加载背景图片
JS:
$('.item').each(function(index) {
var thisItem = $(this);
var image_url = thisItem.find('.img').css('background-image');
var img = new Image();
img.src = image_url.replace(/(^url\()|(\)$|[\"\'])/ig, '');
if (image_url){
//initialize only when background img is loaded
var $img = $('<img>').attr('src', img.src).on('load', function(){
//don't allow img to be larger than it is
if(img.width < thisItem.width()){thisItem.css({'max-width':img.width+'px'});}
var ratio = img.height/img.width;
thisItem.find('.item_ratio').css({'padding-bottom':ratio*100+'%'});
thisItem.find('.img').fadeIn(800);
});
}
});
HTML:
<div class="item">
<div class="img" style="background-image:url('some_url'); width: 100%; background-size: cover;"></div>
<div class="item_ratio"></div>
<!-- Some other not important html ->
</div>
答
影像上load
事件已被证明是不可靠/不存在,这就是为什么有a well-known jQuery plugin帮助理顺事情了跨浏览器。我建议看看,而不是试图找出浏览器问题和边缘情况下,如浏览器从缓存中获取图像时缺少加载事件等。
编辑:代码示例使其与悬挂工作<img/>
(未经测试)
//initialize only when background img is loaded
var $img = $('<img>').attr('src', img.src).prependTo(thisItem).hide().imagesLoaded(function() {
//don't allow img to be larger than it is
//... [your code]
});
我用这种方法here。 (左侧的大拇指是单个背景图像精灵,一旦图像载入,我就会对这些精灵进行动画处理)。
另外,您也可以在CSS中使用background-size: contain
。这样做可能会在更新的浏览器(如果图像很大)中更高性能,并且因为您不需要任何代码而更加简单。它在IE8中不受支持,如果您使用的是Modernizr,您可以测试它。这可能是我的首选方法,但我通常包括Modernizr。因人而异。
实际上,该插件不支持我真正需要的背景图像 – vlad
我看到您正在监听'$('')'上的'load'事件。但是,您可能需要实际将其插入到DOM中(隐藏)以使'load'触发。我最近做了这件事,它的工作可靠。 –