在单个图像加载后显示 div答案

【问题标题】：Show div after individual image loads在单个图像加载后显示 div
【发布时间】：2011-04-13 07:55:59
【问题描述】：

假设我有这样一组图像：

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

（注意divs 最初是隐藏的）

我想要的是，在单个 <image> 加载后，.show(); 周围的 div.image。

我认为这很容易做到，但我已经在整个互联网上进行了搜索，到目前为止，他们一直在加载所有图像而不是单个图像之后做一些事情。

这有可能吗？

编辑：它后来被更改，因此图像周围也有链接工作示例：http://jsfiddle.net/peeter/qwtWZ/6/

【问题讨论】：

标签： jquery image html load show

【解决方案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/

【讨论】：

我一直没有想到它..可以说我想在图像周围添加链接..jsfiddle.net/qwtWZ在这种情况下.parent不起作用..我确实尝试过......父母（'.image'）但没有工作
我发誓我也尝试过使用最接近的，但它只是没有工作.. 好吧.. 这就是我问它的原因.. :) 谢谢！

【解决方案2】：

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

编辑：已更新以允许图像是后代，但不一定是子图像。

【讨论】：

【解决方案3】：

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

应该可以正常工作！

【讨论】：

【解决方案4】：

你可以像这样使用 jQuery 加载图像

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

您将上述 ID 分配给您的 div 的位置。资源加载完成后调用 load() 函数中的函数。

函数参考见http://api.jquery.com/load/。

【讨论】：

有没有更简单的方法可以将它指向 ".image img" ？如： if ('.image img') 已加载 -> $('.image').show(); ..当然是个人..

【解决方案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 -->

【讨论】：