Question

我的页面中有数据库查询，它会在时间内获取大量数据并在页面上显示。仅供参考，我不能使用分页。所以我只想显示一个加载器图像，直到查询获取所有数据并在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，但无法正常工作。我想要显示加载器图像，如何做，我想我错过了什么。

Answer 1

问题很可能是浏览器甚至无法获取您的页面，直到完成所有缓慢的数据库工作。您可以尝试在加载器div之后将<cfflush>放入上面的脚本中。这将导致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。

如何在页面加载缓慢时显示加载程序图像

1 个答案: