页面加载后使用ajax加载数据表(jquery)和/或让图像首先加载

发布于 2024-11-09 09:24:23 字数 1516 浏览 0 评论 0原文

嘿伙计们。我有一个 Ajax 加载的数据表。加载进展顺利,但我注意到的一件事是页面上的文本已加载,但页眉图像和页脚图像是在 Ajax 调用后加载的。这在页面上看起来有点奇怪。我想知道是否有办法解决这个问题。我了解 jQuery 中的 setTimeOut 方法,但对如何将其与数据表一起使用感到困惑。

$(document).ready(function() {

    var selected;
    var selectedOutput;
    var template;
    var submitButton;

    var insertedTable =  $('#pkgLineTable').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "bPaginate": true,
        "bLengthChange": true,
        "bFilter": true,
        "bSort": false,
        "bInfo": true,
        "bAutoWidth": false,
        "bProcessing": true,
        "bServerSide": false,
        "sAjaxSource": '@{Overview.getPkgLineList()}',
        "fnServerData": fnServerObjectToArray(['shortname', 'description'])             
    });
});

  fnServerObjectToArray = function (aElements) {     

    return function (sSource, aaData, fnCallback) {
        $.ajax({
            "dataType": 'json',
            "type": "GET",
            "url": sSource,
            "data": aaData,
            "success": function (json) {
                var a = [];
                $.each(json, function(index, item) {     
                    var inner = [];
                    for (var i = 0, iLen = aElements.length; i < iLen; i++) {
                        inner.push(item[aElements[i]]);
                    }
                    a.push(inner);
                });
                json.aaData = a;
                fnCallback(json);
            }
        });
    }
}

Hey guys. I have an Ajax-loaded data table. The load goes fine but the one thing I notice is the text on the page is loaded but the header image and footer image is loaded after the Ajax call. This looks a little weird on the page. I'm wondering if there is a way to get around this. I know about the setTimeOut method in jQuery but baffled on how to use that with data tables.

$(document).ready(function() {

    var selected;
    var selectedOutput;
    var template;
    var submitButton;

    var insertedTable =  $('#pkgLineTable').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "bPaginate": true,
        "bLengthChange": true,
        "bFilter": true,
        "bSort": false,
        "bInfo": true,
        "bAutoWidth": false,
        "bProcessing": true,
        "bServerSide": false,
        "sAjaxSource": '@{Overview.getPkgLineList()}',
        "fnServerData": fnServerObjectToArray(['shortname', 'description'])             
    });
});

  fnServerObjectToArray = function (aElements) {     

    return function (sSource, aaData, fnCallback) {
        $.ajax({
            "dataType": 'json',
            "type": "GET",
            "url": sSource,
            "data": aaData,
            "success": function (json) {
                var a = [];
                $.each(json, function(index, item) {     
                    var inner = [];
                    for (var i = 0, iLen = aElements.length; i < iLen; i++) {
                        inner.push(item[aElements[i]]);
                    }
                    a.push(inner);
                });
                json.aaData = a;
                fnCallback(json);
            }
        });
    }
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

神经暖 2024-11-16 09:24:23

如果您想在图像完成后加载 ajax,请使用 load 而不是 .ready:

$(window).load(function() {

    var selected;
    var selectedOutput;
    var template;
    var submitButton;

If you want to load the ajax after the images have finished, use load instead of .ready:

$(window).load(function() {

    var selected;
    var selectedOutput;
    var template;
    var submitButton;
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文