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>

来源

2013-08-31 vlad

影像上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。因人而异。

来源

2013-08-31 15:24:05

实际上，该插件不支持我真正需要的背景图像 – vlad

我看到您正在监听'$（''）'上的'load'事件。但是，您可能需要实际将其插入到DOM中（隐藏）以使'load'触发。我最近做了这件事，它的工作可靠。 –

JS/jQuery：加载背景图片

回答

相关问题