jquery - 如何停止加载占位符并在 Jquery/CSS 中显示 div

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

placeholder加载完成后如何显示标签div

Answer 1

首先将 display:none 保存到您的 div 中，当加载器完成时您可以显示它。查看我的代码或 Codepen

HTML代码-

<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();
  });
}