Question

有没有办法在使用AJAX / get / load with 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; }); });

Answer 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;

});

Answer 2

点击此链接，上一篇文章：Wait untill all images are loaded

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

这样的事情：

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

Answer 3

获取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;
});

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

3 个答案: