时间戳

首页 > 解决方案 > 如何在 Jquery/CSS 中停止加载占位符并显示 div

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

问题描述

我正在使用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 稍后会显示

标签： jqueryajaxcss

解决方案

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

在这里写代码

代码在这里：

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

推荐阅读