0

我的功能应该等到加载背景图像，然后将图像的比例添加到它的容器中并淡入背景图像容器。它似乎在 Chrome 中工作，但在 Internet Explorer 8 和 9 中失败，并不总是在 10 中工作. 在 ie8 中它似乎不理解 jquery on('load') 事件。在即 9 和 10 中，它并不总是能找到背景图像的宽度。如何让它在 ie8+ 和其他主流浏览器中运行？

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>
4

1 回答 1

0

图像上的load事件已被证明是不可靠/不存在的，这就是为什么有一个著名的 jQuery 插件来帮助平滑跨浏览器的原因。我建议您看一下，而不是试图找出浏览器问题和边缘情况，例如当浏览器从缓存中获取图像时丢失加载事件等。

编辑：代码示例使其与悬空<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]
});

我在这里使用了这种方法。（左侧的拇指是单个背景图像精灵，一旦图像加载，我就会对其进行动画处理）。

顺便说一句，您也可以background-size: contain在 CSS 中使用。这样做可能在较新的浏览器中性能更高（如果图像很大）并且更简单，因为您不需要任何代码。不过，IE8 不支持它，如果您使用的是 Modernizr，您可以对其进行测试。这可能是我的首选方法，但无论如何我通常都会包含 Modernizr。YMMV。

于 2013-08-31T15:24:05.963 回答