Удалить одноуровневый, когда изображение загружается

Question

I имеет следующую структуру:

<div class="holder"> 
    <div class="image_inner imageFill6"></div> 
    <img class="listImage" src="/images/production/5562.jpg"> 
</div> 

Я хочу DIV с классом .image_inner постепенно исчезать, когда изображение с классом .listImage нагрузок.

На странице будет много таких экземпляров.

Это то, что я пытаюсь, но не исчезать .image_inner

$(window).on('load', function() { 
    $(".listImage").on('load', function() { 
     $(this).siblings('.image_inner').fadeOut(); 
    });  
}); 

Answer 1

Причина в том, что при событии загрузки окна все изображения уже загружены, поэтому их событие загрузки не будет запущено снова. Попробуйте

jQuery(function ($) { 
    $(".listImage").on('load', function() { 
     $(this).siblings('.image_inner').fadeOut(); 
    }).filter(function() { 
     //trigger the load event for images which are already loaded 
     retun this.complete; 
    }).trigger('load'); 
}); 

Answer 2

Примечания значительных предупреждений в JQuery documentation:

Предостережение мероприятия нагрузки при использовании с изображениями

Общая проблема, которую разработчики пытаются решить с помощью ярлыка .load(), - это выполнить функцию, когда изображение (или коллекция изображений) полностью загружено. Есть несколько известных оговорок с этим, что следует отметить. К ним относятся:

• Она не работает стабильно и не надежно кроссбраузерный
• Это не срабатывает правильно в WebKit, если ЦСИ изображения установлен в том же ЦСИ, как и прежде
• Это не правильно пузырек вверх по DOM дерево
• Может прекратить огонь для изображений, которые уже живут в кэше браузера

вы уверены, что вы в состоянии преодолеть эти?

Answer 3

Ваш код работает нормально.

$(".listImage").on('load', function() { 
    $(this).siblings('.image_inner').fadeOut(); 
}); 

Вам нужно будет позвонить в JS в конце кузова. Пожалуйста, взгляните на jsFiddle: http://jsfiddle.net/giri_jeedigunta/3vkXQ/