我的页面中有数据库查询，它一次获取大量数据并将其显示在页面上。仅供引用，我无法使用分页。所以我只想显示加载程序图像，直到查询获取所有数据并显示在 UI 上。例如，我尝试过这段代码，但它不起作用，
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script>
<style>
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('processing.gif') 50% 50% no-repeat rgb(249,249,249);
}
</style>
</head>
<body>
<div id="page">
<div class="loader"></div>
<cfquery datasource="dsn_spinlife_prod_new" name="qryGetProdList">
SELECT *
FROM tbl_products;
</cfquery>
</div>
</body>
</html>
但它不起作用，在页面加载时，Firefox 仍然显示空白页面。我也尝试过 document.ready，但不起作用。我想要显示加载程序图像，如何做到这一点，我想我错过了一些东西。
最佳答案
问题很可能是在所有缓慢的数据库工作完成之前，浏览器甚至无法获取您的页面。您可以尝试输入 <cfflush>在你的 loader div 之后进入上面的脚本。这将导致 CF 将此时生成的所有内容发送回浏览器。
请记住，一旦您调用 <cfflush>您无法再设置 cookie 或发送重定向，因此您需要检查代码以确保代码中不再有这些内容。
另一种方法是生成一个页面，其中除了占位符之外什么都没有，并使用 jQuery 将结果作为单独的请求加载:
<script>
$('#results').load('results.cfm',function(){$('.loader').hide()});
</script>
<div class="loader">Loading...</div>
<div id="results"></div>
results.cfm 运行查询并生成完成页面所需的 HTML。
关于javascript - 如何在页面加载缓慢时显示加载图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25843317/