Question

我有一张图像，该图像作为div中的一系列切片加载。我只想在所有内容加载完毕后显示div。我正在使用另一个div屏蔽正在加载的div：

<div id="prepage" style="position:absolute; left:0px; top:0px; background-color:white; height:100%; width:100%; z-index:1">
  <div align="center">
    <p>loading... please wait</p>
  </div>
</div>

当加载div id =“ graphic”中的图像时，我试图隐藏上面的div。我在想像这样的事情可能会起作用：

$(window).load(function() {
  $("#prepage").hide();
});

但是它不起作用。这似乎是一个相对普遍的问题，但是由于某种原因，所有答案都对我不起作用-可能是因为我的编码技能很初级。预先感谢。

update 看来我应该已经包含了图像div的内容：

<div align="center" id="graphic">
  <div style="position:relative; left:0px; top:0px; width:251px; height:350px">
	<div style="position:absolute; left:0px; top:0px; width:251px; height:8px;">
		<img src="foo.gif" width="251" height="8" alt="">
	</div>
	<div style="position:absolute; left:0px; top:3px; width:96px; height:12px;">
		<img src="bar.gif" width="96" height="12" alt="">
	</div>

^等。 25个gif片段构成了div中的整个图像。

Answer 1

最初隐藏div，然后将onload事件附加到图像上。

创建一个数据属性，该属性随所加载的每个图像增加，然后在div等于图像总数时显示div：

$('#graphic img').on('load', function() {
  let loaded = ($('#graphic').data('loaded') + 1) || 1;
  $('#graphic').data('loaded', loaded);
  if (loaded == $('#graphic img').length) {
    $('#graphic').show();
  }
});

$('#graphic img').on('load', function() {
  let loaded = ($('#graphic').data('loaded') + 1) || 1;
  $('#graphic').data('loaded', loaded);
  if (loaded == $('#graphic img').length) {
    $('#graphic').show();
  }
});

#graphic {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div align="center" id="graphic">
  <img src="https://picsum.photos/50/50?random">
  <img src="https://picsum.photos/50/51?random">
  <img src="https://picsum.photos/50/52?random">
  <img src="https://picsum.photos/50/53?random">
  <img src="https://picsum.photos/50/54?random">
  <img src="https://picsum.photos/50/55?random">
  <img src="https://picsum.photos/50/56?random">
  <img src="https://picsum.photos/50/57?random">
  <img src="https://picsum.photos/50/58?random">
  <img src="https://picsum.photos/50/59?random">
  <img src="https://picsum.photos/50/60?random">
  <img src="https://picsum.photos/50/61?random">
  <img src="https://picsum.photos/50/62?random">
  <img src="https://picsum.photos/50/63?random">
  <img src="https://picsum.photos/50/64?random">
  <img src="https://picsum.photos/50/65?random">
  <img src="https://picsum.photos/50/66?random">
  <img src="https://picsum.photos/50/67?random">
  <img src="https://picsum.photos/50/68?random">
  <img src="https://picsum.photos/50/69?random">
</div>

当另一个div的内容已加载时隐藏div

1 个答案: