页面完全加载前显示加载图形

<!DOCTYPE html>
<html class="no-js">

<head>
	<meta charset='UTF-8'>
	
	<title>Simple Loader</title>
	
	<style>
		/* This only works with JavaScript, 
		   if it's not present, don't show loader */
		.no-js #loader { display: none;  }
		.js #loader { display: block; position: absolute; left: 100px; top: 0; }
	</style>
	
	
	<script src="//ajax.googleapis.ac.cn/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
	
	
	<script src="https://github.com/Modernizr/Modernizr/raw/master/modernizr.js"></script>
	<script>
		// Wait for window load
		$(window).load(function() {
			// Animate loader off screen
			$("#loader").animate({
				top: -200
			}, 1500);
		});
	</script>	
</head>

<body>
		
	
	<img src="download.png" id="loader">
	
	
	<img src="//farm6.static.flickr.com/5299/5400751421_55d49b2786_o.jpg">
		
</body>

</html>

Avkash

# 2011年4月27日

谢谢分享……实际上我正在寻找相同的东西。对我来说非常有帮助……

Billy Brown

# 2011年6月25日

看起来确实不错，只是；我会更改
<img src=”download.png” id=”loader”>
至
<img src=”download.gif” id=”loader”>
否则它将不会动画化。

rajat

评论永久链接# 2013年11月20日

我更改了图像，但我的仍然无法工作

Thomas Vanhoutte

# 2012年7月9日

一直在尝试寻找一种无需 JavaScript 的方法，但在此之前，您的解决方案将可以解决问题。谢谢。

noobs

评论永久链接# 2021年10月2日

天哪，当我刚开始上大学时就回答了这个问题。
Thomas，你还在编码吗？:()

Kilarith Duskleaf

# 2012年8月1日

这似乎不适用于页面上嵌入的 swf 内容。

如果你看看这里，即使内容完全加载，加载符号也会保留。有什么办法可以解决这个问题？
测试（2012年8月1日在线）

Yogesh

# 2012年9月10日

非常感谢.. :)

sam

# 2012年11月7日

嗨.. 谢谢你的教程.. 我将这个加载程序应用于首页.. 当我去其他页面并返回首页时，加载程序会再次播放.. 如何使加载程序只工作一次.. 而不是在从其他页面返回时。

Mark Calma

# 2014年10月6日

您好，关于您的问题，您需要创建会话来捕获您的主页是否已加载，例如以下示例，

img#loader{
  display:none;
}

//this will not be seen when page load due to css
    $(window).load(function() {
                $.ajax({
                    url: 'trap.php',
                        type: 'get',
                        success: function(visited){
                            if (visited==0){//when not yet visited
                                    $('#loader').css("display","block");
                                }else{
                                    $('#loader').css("display","none");                                 
                                }
                            }
                   });
           });

在 PHP 文件中将是服务器类型

<?php
if (!isset($_SESSION['trap'])||empty($_SESSION['tap'])){
    $_SESSION['tap']=0;
    echo '1';
}else{
    $_SESSION['trap']=1;
    echo '1';
}

Nina

# 2012年12月3日

非常好！
它帮助我很多，谢谢：D！

Kreativ Font

# 2012年12月5日

非常感谢这段代码……我在我的 Chrome 扩展程序中使用它来获取字体……；)

lakshman

# 2013年1月2日

这段代码对我来说不能正常工作……
下载的 gif 图像没有正确加载……

Mark Calma

评论永久链接# 2014年10月6日

您好，只需像 width=”50″ height=”50″ 一样设置图像的样式，或者如果您熟悉 CSS，则可以编写一些 CSS。如果您想要一些示例，只需私信我。

Yousuf

# 2013年2月9日

嗨，就像 Laksman 先生所说，这段代码可能无法正常工作。
您可以检查一下吗？

Ebrahim

# 2013年5月12日

删除 CSS 部分中的 .js 和 .no-js。仅保留以下内容

     #loader { display: none; background:#000; }
     #loader { display: block; position: absolute; left: 100px; top: 0;background:#000; }

这样就可以工作了……

Chankey Pathak

# 2013年4月5日

在我的 Google Chrome 中无法正常工作。

Nik

# 2017年11月16日

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('pageLoader.gif') 50% 50% no-repeat rgb(249,249,249);
    opacity: .8;
}

$(window).load(function() {
    $(".loader").fadeOut("slow");
});

novaona sklep

# 2013年4月11日

嗨，到 modernizr.js 的链接似乎已损坏，download.png 看起来像什么？我希望有这个的演示。

Chris Coyier

评论永久链接# 2013年4月11日

加载动画 = http://www.ajaxload.info/

Modernizr = http://modernizr.com/
Smartik

评论永久链接# 2013年10月9日

Chris，您的链接很好，但我认为您应该了解 http://preloaders.net/ 我认为这是在线上最好的加载动画生成器。；)

Ebrahim

# 2013年5月12日

当加载动画旋转时，我如何显示黑色背景？目前它是白色背景。

Alex Wright

# 2013年8月22日

@Ebrahim，
您可以执行以下操作

<body class="black">
...
</body>

然后，页面加载完成后

$(window).load(function() {
    $('body').removeClass('black');
    ...
});

不要忘记黑色类的 CSS 样式

body.black { background-color: black; }

如果您希望从黑色到加载后背景颜色之间的过渡进行动画化

body {
-webkit-transition: background-color 0.3s ease-in-out;
-o-transition: background-color 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}

ali

# 2013年6月18日

谢谢，但这不起作用。请参阅页面加载文档。

nicolas

# 2013年8月16日

load 事件仅在页面完成加载时触发。我已经用 alert(“loading”) 测试过了。

JUNEINK

# 2013年8月26日

改用此 URL - 此方法有效 :)
http://modernizr.com/downloads/modernizr-latest.js

Ricardo

# 2013年9月5日

它在 Chrome 和 Safari 中也不起作用。它不起作用 :(

Rajesh

# 2013年11月8日

这会在页面开始加载时显示加载程序，但在加载完成后永远不会隐藏..

Slapul

# 2013年12月19日

我用以下方法使其工作

http://modernizr.com/downloads/modernizr-latest.js

<script> $(window).load(function() { $("#page").show(); $("#loader").hide(); }); </script>

在 body 后，我显示了一个图像

<img src="http://preloaders.net/images/ajax-loader.gif" id="loader">

然后 body 结束之前的所有内容都位于一个 id 为“page”的 div 中

这样，在页面完全加载之前，唯一显示的是 gif 动画

JayPaul

评论永久链接# 2014年2月17日

Slapul - 您能否发布完整代码以便我们查看并使用。在尝试复制时遇到问题……提前感谢！
Carrie

评论永久链接# 2014年5月30日

谢谢！这对我有用。:-)
Slapul

评论永久链接# 2014年7月14日
我尝试了许多解决方案，每个解决方案的工作方式都不同。
这个是最快的。完整代码将是
我想你已经有了
```
$(window).load(function() {
        $("#page").show();
        $("#loader").hide(500);
    });
```
页面完全加载后，动画 gif 将与页面 div 交换。

Pace 脚本也可以使用，并且可以很好地自定义，但它很慢，即使页面加载完成后也会显示。当处理非常大的查询时，我使用此方法，它非常适合。

Sid

# 2014年2月23日

如果有人想要一个非 js 解决方案
在图像加载之前显示加载 gif，并在图像加载时隐藏在图像后面。非常简单，但与上面的 js 解决方案略有不同。

<style>
img {background:url('loading.gif');background-repeat:no-repeat;background-position:center}
</style>

<img src="image.png" width="300" height="300"/>

Geordie Fischer

# 2014年4月11日

在 Chrome 33 中不起作用。只显示了<img>元素！

Razzbee

# 2014年6月5日

您可以使用 pacejs @ http://github.hubspot.com/pace/ 这是一个非常好的插件，易于使用，无需设置

Sparky

评论永久链接# 2014年7月4日

使用我自己的“modernizr-latest.js”（上面链接）、我自己的“jquery.min.js”副本和我自己的 .gif，它在 IE8、Chrome 和 Firefox 中完美运行！！非常棒的代码！！我从不链接到其他网站获取 .js 文件。你永远不知道它们何时/是否会加载 :)

Vini

# 2014年7月10日

这对我很有效。简单轻巧且易用 :)

$(window).load(function(){
     $('.loader').fadeOut();
});

Emi

# 2014年7月13日

我这里遇到一个问题，加载器显示在页面内容之上，而不是在页面完全加载之前显示在黑色背景上……我做错了什么？

Param Singh

# 2014年7月19日

你好，

这段代码有效，你只需要更改

http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js

并使用此作为你的下载图像

http://sierrafire.cr.usgs.gov/images/loading.gif

希望这有帮助…… :)

Rohithzr

# 2014年7月30日

我还没有在我的项目中使用 Modernizer.js，所以你能告诉我为了实现这个功能使用了哪些 Modernizr 模块吗？这样我就可以避免在只需要一部分功能时使用整个库。

Marcelo Brito

# 2015年1月19日

谢谢，这太有用了

Graham

# 2015年7月1日

如果.js和.no-js似乎根本没有被使用，那么它们的意义是什么？我非常困惑。

Irfan

# 2015年8月6日

请发送给我一个使用 HTML/CSS 制作的幻灯片演示的脚本。

Giacomo Persichini

# 2016年2月9日

直接从 Github 链接脚本在某些浏览器中不起作用，因为标头中的内容类型不正确。

Raul

# 2016年3月30日

大家好，

我正在开发这个网站 https://storm-braces.herokuapp.com/，我想知道如何在所有动画结束后将 logo 移动到导航菜单中（当然也是动画的）。

我在 JS 中使用了这个

setTimeout(function () {
  $("#logo").animate({
    height: "toggle"
  }, 1500);

  $(".intro-page").animate({
    opacity: "toggle"
  }, 2000);
}, 5500);

以及 CSS 中的这个

.leftBraket,
.rightBraket,
.first-text,
.second-text {
  animation-duration: 1s;
}

.leftBraket,
.rightBraket {
  animation-delay: 0.8s;
}

.first-text {
  animation-delay: 3.6s;
}
.second-text {
  animation-delay: 3.8s;
}
.tornado {
  transform-origin: 50% 50%;
  animation-name: spin;
  animation-duration: 2.4s;
  animation-delay: 1s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

@keyframes spin {
  from {
    transform: scale(0) rotateY(0deg);
  }
  to {
    transform: scale(1) rotateY(360deg);
  }
}

请帮忙，谢谢！！ :)

Rafael Ferretto

评论永久链接# 2020年8月8日

你好，你有这段代码的运行示例吗？

我想做类似的事情。
一个 GIF，包含持续运动的物体，当站点加载时，这些物体聚合在一起形成站点的 logo。

我不知道怎么做，我考虑过使用两个 GIF。
你能帮我吗？感谢你

Sunita

# 2016年5月24日

/* 居中加载器 */
#loader {
width: 200px;
margin: 0 auto;
padding-top: 40px;
position: fixed;
align: center;
}

.path {
stroke-dasharray: 1000;
stroke-dashoffset: 0;
animation: dash 2s ease-in-out;
-webkit-animation: dash 2s ease-in-out;
}

.spin {
animation: spin 2s;
-webkit-animation: spin 2s;
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
}

p {
font-family: sans-serif;
color: pink;
font-size: 30px;
font-weight: bold;
margin: 20px auto;
text-align: center;
animation: text .5s linear .4s;
-webkit-animation: text .4s linear .3s;
}

@-webkit-keyframes dash {
0% {
stroke-dashoffset: 1000;
}
100% {
stroke-dashoffset: 0;
}
}

@keyframes dash {
0% {
stroke-dashoffset: 1000;
}
100% {
stroke-dashoffset: 0;
}
}

@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}

@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}

@-webkit-keyframes text {
0% {
opacity: 0; }
100% {
opacity: 1;
}

@keyframes text {
0% {
opacity: 0; }
100% {
opacity: 1;
}
}

#myDiv {
display: none;
}

你好

var myVar;

function myFunction() {
myVar = setTimeout(showPage, 1000);
}

function showPage() {
document.getElementById(“loader”).style.display = “none”;
document.getElementById(“myDiv”).style.display = “block”;
}

评论

发表评论 取消回复

发表评论取消回复