如何在 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...

占位符加载完成后如何显示标签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();
  });
}

Answer 2

您可以使用toggle() 隐藏“showText”div。然后当你的回调被调用时。您可以再次调用“切换”来显示它。

Codepen here

代码在这里：

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