JS/jQuery: background image onload

Question

У меня есть функция, которая должна ждать, пока загрузится фоновое изображение, а затем добавит отношение изображения к контейнеру и затухает контейнер фонового изображения. Он работает в Chrome, но не работает в Internet Explorer 8 и 9, и не всегда работает в 10. В ie8 он, похоже, не понимает jquery в событии (load). В точках 9 и 10 он не всегда находит ширину фонового изображения. Как я могу заставить его работать в ie8 + и других основных браузерах?

ЯШ:

$('.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> 

Answer 1

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. (Пальцы слева - это один спрайт фонового изображения, я анимация тех, которые были загружены в один раз).

В стороне, вы также можете использовать background-size: contain в CSS. Это может быть более эффективным в новых браузерах (если большие изображения) и намного проще, поскольку вам не нужен какой-либо код. Он не поддерживается в IE8, хотя вы можете проверить, используете ли вы Modernizr. Вероятно, это был мой предпочтительный подход, но в любом случае я обычно использую Modernizr. YMMV.