Показывать div после загрузки отдельных изображений

Question

Допустим, у меня есть такой набор изображений:

<div class="image"><img src="image1.jpg" alt="" />image1</div>
<div class="image"><img src="image2.jpg" alt="" />image2</div>
<div class="image"><img src="image3.jpg" alt="" />image3</div>

(обратите внимание, что div будут изначально скрыты)

Что мне нужно, так это то, что после загрузки отдельного <image> .show(); div.image, окружающего его.

Я думаю, что это будет легко сделать, но я искал по всему Интернету, и до сих пор они собирались что-то делать после того, как все изображения загружены вместо отдельных изображений.

Это вообще возможно сделать?

Edit: Позже это было изменено, так что есть также ссылка вокруг изображения Рабочий пример: http://jsfiddle.net/peeter/qwtWZ/6/

Answer 1

<div class="image"><img src="http://acupuncture.celeboutfit.com/images/img/IMG_5400m-1.jpg" alt="" />image1</div>
<div class="image"><img src="image2.jpg" alt="" />image2</div>
<div class="image"><img src="image3.jpg" alt="" />image3</div>
<script type="text/javascript">
$(document).ready(function(){
    $("div.image").hide();
    $("div.image").find("img").load(function(){
        $(this).closest("div.image").show(500);
    });
});
</script>

Рабочий пример: http://jsfiddle.net/peeter/qwtWZ/6/

Answer 2

$(".image img").load(function()
{
    $(this).closest(".image").show();
});

Редактировать: Обновлен для учета изображений, которые являются потомками, но не обязательно дочерними.

Answer 3

$(document).ready(function(){
  $('img').load(function(){
    $(this).parent().show();
  });
});

должно работать просто отлично!

Answer 4

Вы можете загружать изображения, используя jQuery, вот так:

$("#img1").load('image1.jpg',function(){ $("#img1").show(); });
$("#img2").load('image2.jpg',function(){ $("#img2").show(); });
$("#img3").load('image3.jpg',function(){ $("#img3").show(); });

Где вы даете вышеуказанные идентификаторы своим div-элементам.Функция в функции load () вызывается после завершения загрузки ресурса.

См. http://api.jquery.com/load/ для ссылки на функцию.

Answer 5

Мне пришлось сделать это, чтобы предотвратить FOUC, но я не хотел загружать удивительный, но тяжелый jQuery прямо вверху моей страницы, поэтому я написал этот служебный скрипт. В моем примере родительский контейнер изображения скрыт до тех пор, пока изображение не будет загружено. У меня работает.

(function() {

  function getArrayFromNodeList(list) {
    return Array.prototype.slice.call(list);
  }

  function ready() {
    var imageContent = document.querySelectorAll('.hero, .key-features__feature'),
      contentArray = getArrayFromNodeList(imageContent);

    contentArray.forEach(function(content) {
      var images = getArrayFromNodeList(content.querySelectorAll('img'));

      images.forEach(function(img) {
        img.onload = function() {
          console.log('img loaded');
          content.style.display = 'block';
        };
      });
    });
  }

  document.addEventListener("DOMContentLoaded", ready);

}());

.hero,
.keyfeatures__feature {
  display: none;
}

<!-- Example of one piece of content -->
<article class="hero">
  <!-- This is the image I want to make sure has loaded -->
  <img src="https://placeimg.com/978/400/animals/grayscale" alt="">

  <!-- other HTML content -->
</article>
<!-- /hero -->

<!-- Example of another piece of content -->
<article class="key-features">
  <div class="key-features__feature">
    <img src="https://placeimg.com/480/320/animals/grayscale" alt="">
  </div>
  <!-- /key-features__feature -->

  <div class="key-features__feature">
    <img src="https://placeimg.com/480/320/animals/grayscale" alt="">
  </div>
  <!-- /key-features__feature -->
</article>
<!-- /key-features 6-6 -->