Question

我仅尝试使用会话存储加载一次网站预加载器，但无法正常工作。

我在网站上添加了预加载器。预加载器按预期方式工作（在页面加载时显示，在页面加载完成时消失）。但是，我发现，一旦站点加载完毕，并且导航到站点的另一页面，然后再次返回到首页（链接到预加载器），预加载器就会再次显示，但这一次并不总是消失。有时，它只是处于“加载”状态，什么也没有发生。我试图通过仅将预加载器加载一次来解决此问题。我尝试使用会话存储来实现此目的，但是它不起作用。我要去哪里错了？这是我的第一个网站，希望对您有所帮助。谢谢。

index.html

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link href="css/styles.css" rel="stylesheet">

</head>

<body>

  <div  class="preloader">
    <div class="preloader4"></div>
    <div id="loadingText"><p>Loading</p></div>
  </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<script src="js/preloader.js"> </script>

</body>

</html>

styles.css

.loading {
  overflow: hidden;
  height: 100vh;
}

.preloader {
  background: #fff;
  position: fixed;
  text-align: center;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
  z-index: 11000;
}

#loadingText {
 vertical-align: middle;
 text-align:center; 
 position: absolute;
 top:50%;
 left: 50%;
 transform:translate(-50%,-50%);
 color: white;
 font-family: "Exo 2", Sans-serif;
 font-weight: 800;
 font-style: italic;
 z-index: 12000;
}

.preloader4 {
  position: absolute;
  top:-100%; right:-100%; left:-100%; bottom:-100%;
  margin:auto;
  z-index:0;
  padding: 0px;
  border-radius: 50%;
  width: 100px;
  height:100px;
  background: radial-gradient(circle at 65% 15%,  #eed0e4 2px, #fdacd4 10%, #FF69B4 40%, #ca4487 80%);

  -webkit-animation: pulse 1s infinite ease-in-out alternate; /* Safari & Chrome*/
  -moz-animation: pulse 1s infinite ease-in-out alternate; /* Firefox */
  -ms-animation: pulse 1s infinite ease-in-out alternate;/* Internet Explorer */
  -o-animation: pulse 1s infinite ease-in-out alternate;/* Opera */  
  animation: pulse 1s infinite ease-in-out alternate; /* W3C */
  z-index: 12000;
}

@-webkit-keyframes pulse {
  from { transform: scale(0.8); }
  to { transform: scale(1.2); }
}

@-moz-keyframes pulse {
  from { transform: scale(0.8); }
  to { transform: scale(1.2); }
}

@-o-keyframes pulse {
  from { transform: scale(0.8); }
  to { transform: scale(1.2); }
}

@keyframes pulse {
  from { transform: scale(0.8); }
  to { transform: scale(1.2); }
}

preloader.js

jQuery(document).ready(function($) {  

$(window).on('load', function(){

if (sessionStorage.getItem('dontLoad') == null) {

  $(".preloader").fadeOut(0, function() {
      $('body').removeClass('loading');
    });

 sessionStorage.setItem('dontLoad', 'true');
}

});

});

Answer 1

我认为您构建的内容是正确的（减去import pandas as pd import datetime import bokeh.plotting as bp from bokeh.palettes import Category10 from bokeh.models import ColumnDataSource test_data = {'name': ['A', 'A', 'A', 'B', 'B', 'B', 'C', 'C', 'C'], 'date': [datetime.date(2010, 1, 1), datetime.date(2010, 2, 1), datetime.date(2010, 3, 1), datetime.date(2010, 1, 1), datetime.date(2010, 2, 1), datetime.date(2010, 3, 1), datetime.date(2010, 1, 1), datetime.date(2010, 2, 1), datetime.date(2010, 3, 1), ], 'score': [100, 200, 300, 150, 400, 600, 150, 250, 400]} plot_df = pd.DataFrame(test_data) gby = plot_df.groupby('name') plot = bp.figure(x_axis_type = 'datetime') x = [list(sdf['date']) for i, sdf in gby] y = [list(sdf['score']) for i, sdf in gby] source = ColumnDataSource(dict( x = x, y = y, legend = plot_df['name'].unique(), color = Category10[len(plot_df['name'].unique())])) plot.multi_line('x', 'y', legend = 'legend', line_color = 'color', line_width = 3, source = source) bp.show(plot)部分）。每次访问该页面时，都会显示一个加载指示器，直到下载并执行了页面上的Javascript。

除非您打算基于会话变量使用服务器端语言有条件地显示加载消息，否则您将无法真正实现所需的功能。

即使进行了sessionStorage检查（我认为这是错误的方法）-直到加载Javascript时，此操作才会完成，因此打开页面时仍会看到加载器。

Answer 2

在CSS中使其显示：无

.preloader {
  background: #fff;
  position: fixed;
  text-align: center;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
  display:none;
  z-index: 11000;
}

在Jquery中

$(document).ready(function() {  
 $(".preloader").show();

  $(".preloader").fadeOut(0, function() {
      $('body').removeClass('loading');
    });

});

如何停止网站预加载器多次加载？

2 个答案: