jquery .get 在渲染之前完全下载内容答案

【问题标题】：jquery .get download content fully before renderingjquery .get 在渲染之前完全下载内容
【发布时间】：2012-03-04 16:06:23
【问题描述】：

有没有办法在使用 AJAX/get/load 和 jQuery 完全下载内容后仅呈现内容？

就目前而言，加载器会在下载“html”时显示，但一旦完成，它就会开始渲染。 html 中有很多图像，因此它们在渲染后开始独立加载。

这是好的设计实践吗？在我看来，一旦加载器消失，一切都应该 100% 渲染，但这当然会增加加载时间。

我可以在没有任何“黑客”的情况下实现这一目标吗？

$(document).ready(function() {

    $('#clicks').click(function(){

        $('#portfolio').append("<div id='loader'><img src='images/loader.gif'/></div>");

        $.get("moreProjects.html", function(datas){
            $('#portfolio').append(datas);
        }, 'html').complete(function() { 
            $('#loader').hide();
        });

        return false;

    });

});

【问题讨论】：

标签： ajax jquery load get

【解决方案1】：

您始终可以将返回的数据存储在变量中，然后将其附加到 complete 函数中：

var returnedData;
$('#clicks').click(function(){

    $('#portfolio').append("<div id='loader'><img src='images/loader.gif'/></div>");

    $.get("moreProjects.html", function(datas){
        returnedData = datas;
    }, 'html').complete(function() { 
        $('#portfolio').append(returnedData);
        $('#loader').hide();
    });

    return false;

});

另一种选择是使用隐藏的 div 容器来加载内容，然后在完成时显示：

$('#clicks').click(function(){

    $('#portfolio').append("<div id='loader'><img src='images/loader.gif'/></div>");
    $('#portfolio').append("<div id='content' style='display:none'></div>");

    $.get("moreProjects.html", function(datas){
        $('#portfolio #content').append(datas);
    }, 'html').complete(function() { 
        $('#portfolio #content').show();
        $('#loader').hide();
    });

    return false;

});

【讨论】：

感谢您的解决方案，我刚刚通过限制我的连接测试了第一个 [无法判断快速连接]。第一个解决方案的行为方式相同，之后图像仍会加载。我假设在加载 HTML 后调用 complete。所以这总是会导致图像独立加载

【解决方案2】：

获取HTML，将其放置在您的页面上或使用JS预加载，如果将其放置在您的页面上，则要加载的图像不能隐藏，但可以放置在屏幕上。加载图像后，将 HTML 移动到您的投资组合元素。

下面的代码只是一个示例，未经测试，加载函数可能会在加载的第一个图像上触发，我认为？如果是这样，您将必须对图像进行计数，在每个图像上放置一个加载函数，然后在所有图像加载后显示 HTML，或者您可以尝试将加载函数附加到 HTML 中的最后一个图像，但没有保证标记中的最后一张图片也是最后加载的，但通常是这样。

如果图像被浏览器缓存，也可能存在负载问题，如果是这样，您需要找到其他解决方案，或者在 $.ajax 中转缓存！

$('#clicks').on('click', function(){
    $('#portfolio').append("<div id='loader'><img src='images/loader.gif'/></div>");
    var jqxhr = $.ajax({
        type:'GET',
        url: 'moreProjects.html',
        datatype: 'html',
        done: function(datas) {
            $('<div id="somediv"></div>').append(datas)
                                         .css({position: 'fixed', left: -5000})
                                         .appendTo('body');
        }
     });
     jqxhr.always(function() {
        $('img', '#somediv').on('load', function() {
            $('#loader').remove();
            $('#portfolio').append($('#somediv').contents());
        });
     });
     return false;
});

【讨论】：

【解决方案3】：

查看此链接，最后一个帖子：Wait untill all images are loaded

在我看来，你要做的就是将 html 保存在一个变量中，然后过滤掉所有的img标签并传递给_loadimages函数在帖子中我给你设置完整的回调。

类似这样的：

var $retData = $(datas);
var $imgs = $retData.find('img');
_loadimages($imgs,function(){
   $('#portfolio #content').append($retData);
});

【讨论】：