Как прекратить загрузку заполнителя и показать div в Jquery / CSS

Question

Я использую CSS и JQuery для загрузки страницы с загрузкой заполнителя .. Я установил: 2 секунды, чтобы удалить загрузку заполнителя:

$('body').append('<div id="linear-background"></div>');
		$(window).on('load', function(){
		  setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
		});
		function removeLoader(){
			$( "#linear-background" ).fadeOut(500, function() {
			  // fadeOut complete. Remove the loading div
			  $( "#linear-background" ).remove(); //makes page more lightweight 			  
		  });  
		}

@keyframes placeHolderShimmer{
			0%{
				background-position: -468px 0
			}
			100%{
				background-position: 468px 0
			}
		}

		#linear-background {
			animation-duration: 1s;
			animation-fill-mode: forwards;
			animation-iteration-count: infinite;
			animation-name: placeHolderShimmer;
			animation-timing-function: linear;
			background: #f6f7f8;
			background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
			background-size: 1000px 104px;
			height: 200px;
			position: relative;
			overflow: hidden;
		}
		
		.showText {
			background-color: red;			
			border: 1px solid #000;
			width: 100px;
			height: 10%;
		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="showText">Hello</div>

Когда сначала загрузите страницу, я бы хотел, чтобы сначала отображался местозаполнитель, а затем удалялся и показывался div ...

Как по окончании загрузки заполнителя тег div появится позже

Answer 1

Сначала сохраните display:none в вашем div, и когда загрузчик завершит работу, вы можете показать его. Пройдите мой код или Codepen

HTML Code-

<div class="showText">Hello</div>

Код CSS-

@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0
  }
  100% {
    background-position: 468px 0
  }
}

#linear-background {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: #f6f7f8;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background-size: 1000px 104px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.showText {
  background-color: red;
  border: 1px solid #000;
  width: 100px;
  height: 10%;
  display: none;
}

Код JS-

$('body').append('<div id="linear-background"></div>');
$(window).load(function() {
  setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
});

function removeLoader() {
  $("#linear-background").fadeOut(500, function() {
    // fadeOut complete. Remove the loading div
    $("#linear-background").remove(); //makes page more lightweight 
    $('.showText').show();
  });
}

Answer 2

Вы можете скрыть div 'showText', используя toggle () . Затем, когда ваш обратный вызов называется. Вы можете снова вызвать 'toggle', чтобы показать это.

Кодовый код здесь

Код здесь:

$('body').append('<div id="linear-background"></div>');
        $('.showText').toggle();
        $(window).on('load', function(){
          setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
        });
        function removeLoader(){
            $( "#linear-background" ).fadeOut(500, function() {
              // fadeOut complete. Remove the loading div
              $( "#linear-background" ).remove(); //makes page more lightweight               
            $('.showText').toggle();
          });  
        }