выгрузить ДИВ когда изображение загружается

Question

У меня есть следующий HTML:

<div class="side"> 
    <div class="imageFill"></div> 
    <img src="/path/to/image1.jpg" class="sideImage"> 
</div> 
<div class="side"> 
    <div class="imageFill"></div> 
    <img src="/path/to/image2.jpg" class="sideImage"> 
</div> 
<div class="side"> 
    <div class="imageFill"></div> 
    <img src="/path/to/image3.jpg" class="sideImage"> 
</div> 

То, что я хочу, чтобы случиться; как полностью загружен каждый образ, я хочу, чтобы скрыть предыдущее <div class="imageFill"></div>

Вот что я пытаюсь, но просто не скрывает их:

$(document).ready(function(){ 
    $(".sideImage").each(function(){ 
     $(this).bind("load", function(){ 
      $(this).closest('.imageFill').fadeOut(); 
     }); 
    }); 
}); 

Answer 1

.closest() поиска для соответствующего элемента в дереве предка, но в вашем случае элемент imageFill является предыдущим родственным элементом sideImage, поэтому вам необходимо использовать .prev()

$(document).ready(function() { 
    $(".sideImage").on('load', function() { 
     //it is the previous sibling 
     $(this).prev('.imageFill').fadeOut(); 
    }).filter(function() { 
     //if the image is already loaded the load handler will not get triggered, so manually trigger it 
     return this.complete; 
    }).trigger('load'); 
}); 

Answer 2

closest() пройти вверх по дереву DOM и получить первый предок ,

В вашем случае, .imageFill является предыдущий родственный элемент .sideImage, так что вы можете использовать prev():

$(this).prev().fadeOut(); 

вместо:

$(this).closest('.imageFill').fadeOut();