我试图弄清楚如何在PHP运行时显示图像，之后消失。
我从一个站点上获取了这段代码，但图像仅在 PHP 加载结束时非常简短地显示。它不会显示页面最初打开的时间，并且似乎只运行一次。
我已经在这里阅读了很多很多网站和线程，但我无法弄清楚这个简单示例中缺少什么。有没有更好的方法可以做到这一点？还是这样，我只需要修复它？
提前谢谢你！
<html>
<head>
<title>Home</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; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(http://smallenvelop.com/wp-content/uploads/2014/08/Preloader_51.gif) center no-repeat #fff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
<script>
// Wait for window load
$(window).load(function() {
// Animate loader off screen
$(".se-pre-con").fadeOut("slow");;
});
</script>
</head>
<body>
<div id="loader" class="se-pre-con"></div>
<?php
include 'content/screen.php';
?>
</body>
</html>
解决了！我找到并修改了这个 AJAX 代码，它完全适用于我正在寻找的内容（相同的页面加载，有多个加载选项（通过链接）。感谢所有有用的信息，引导我走上正确的道路！这个社区真棒！
<head>
<title>Demo</title>
<style>
#fade {
display: none;
position:absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #ababab;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .70;
filter: alpha(opacity=80);
}
#modal {
display: none;
position: absolute;
top: 45%;
left: 45%;
width: 64px;
height: 64px;
padding:30px 15px 0px;
border: 3px solid #ababab;
box-shadow:1px 1px 10px #ababab;
border-radius:20px;
background-color: white;
z-index: 1002;
text-align:center;
overflow: auto;
}
</style>
<script>
function openModal() {
document.getElementById('modal').style.display = 'block';
document.getElementById('fade').style.display = 'block';
}
function closeModal() {
document.getElementById('modal').style.display = 'none';
document.getElementById('fade').style.display = 'none';
}
function loadAjax(page) {
document.getElementById('results').innerHTML = '';
openModal();
var xhr = false;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xhr) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
closeModal();
document.getElementById("results").innerHTML = xhr.responseText;
}
}
xhr.open("GET", "content/"+page+".php", true);
xhr.send(null);
}
}
</script>
</head>
<body>
<div id="content">
<a href="javascript: void(0);loadAjax('page1');">Click to load page 1</a><br/><br/>
<a href="javascript: void(0);loadAjax('page2');">Click to load page 2</a><br/><br/>
<div id="results"><!-- Results are displayed here --></div>
<div id="fade"></div>
<div id="modal">
<img id="loader" src="loading.gif" />
</div>
</div>
</body>
</html>
它完全与 PHP 应用的输出缓冲有关。
此堆栈溢出链接解释了为什么它不能按预期工作，一种可能的方法，以及为什么你不应该让它以这种方式工作。
PHP 总是（除非特别说明不要）在打印输出之前缓冲输出。这意味着当你实际打印时，PHP只是将输出文本存储在内存中。打印完所有内容后，将打印存储在内存中的内容并刷新内存。不仅仅是PHP这样做。跨多种语言和平台的几乎所有 I/O 库都具有此功能，默认情况下通常启用此功能。
这是一个相关链接，显示了绕过或禁用此功能的所有可能选项。我个人认为您不应该禁用它，因为图像仍然需要加载，并且您将无法控制 PHP 加载和图像加载之间的延迟。我认为在这种情况下，涉及Ajax的解决方案可能更适合您的需求。
您是否正在尝试显示PHP操作的加载动画/图像？如果是，那么您绝对应该在单独的操作中使用Ajax。
编辑：很抱歉没有粘贴链接：如何在PHP中禁用输出缓冲
下面介绍如何将页面加载时显示图像应用于您的情况。
用这样的div 替换你的 php 标签：
<div id="main"></div>
然后像这样更改淡出脚本：
<script>
$(document).ready(function() {
$("#main").load("content/screen.php", function () {
// Animate loader off screen
$(".se-pre-con").fadeOut("slow");
});
});
</script>