Блог

У меня есть изображение, которое загружается в виде серии фрагментов внутри 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 при загрузке изображений в div id =»graphic». Я думал, что что-то подобное может сработать:

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

Однако это не работает. Это кажется относительно распространенным вопросом, но по какой-то причине ни один из ответов не подходит для меня — вероятно, потому, что мои навыки кодирования находятся в зачаточном состоянии. Заранее спасибо.

обновление кажется, я должен был включить содержимое 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>  

^ и так далее. В div есть 25 фрагментов gif, которые составляют все изображение целиком.

Изначально скройте div и прикрепите событие onload к изображениям.

Создайте атрибут данных, который увеличивается для каждого загруженного изображения, затем покажите 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>