在显示 div 之前加载图像

Question

我以前从未在这个论坛上问过任何问题，所以我会尽量说得清楚。我试图在我的网站中加载 div 的内容时显示加载屏幕。

我尝试使用 jQuery .load() 函数，但它似乎不起作用。当我使用 .ready() 函数时它可以工作，但我想在显示 div 之前加载所有图像。

所以div被隐藏了（style =“display：none;”）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loading"> // loading screen </div>
<div id="divtoshow" style="display:none;"> //images and text </div>

<script>
$("#divtoshow").load(function(){
  $("#loading").fadeOut(200);
  $("#divtoshow").fadeIn(200);
});
//if i replace load with ready it works
</script>

Answer 1

如果您想使用该.load()方法，您需要将其绑定到img元素而不是容器：

$("#divtoshow img").on('load', function(){
  $("#loading").fadeOut(200, function(){
    $("#divtoshow").fadeIn(200)
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loading">Loading</div>
<div id="divtoshow" style="display:none;"><img src="http://lorempixel.com/350/150"><h1>My Text</h1></div>