Javascript 所有函数完成后是否仅显示jQuery.load？

我目前正在通过从包含多个产品的图库页面加载产品

加载这些产品（前3个）后，我将获取加载的href，然后再次加载以从产品页面获取特定于产品的信息

第一步：

EMPTY DIV                           EMPTY DIV
EMPTY DIV                           EMPTY DIV
EMPTY DIV                           EMPTY DIV

LOADED PRODUCT ANCHOR AND IMAGE     EMPTY DIV
LOADED PRODUCT ANCHOR AND IMAGE     EMPTY DIV
LOADED PRODUCT ANCHOR AND IMAGE     EMPTY DIV

LOADED PRODUCT ANCHOR AND IMAGE     PRODUCT INFORMATION FROM PRODUCTSPECIFIC URL
LOADED PRODUCT ANCHOR AND IMAGE     PRODUCT INFORMATION FROM PRODUCTSPECIFIC URL
LOADED PRODUCT ANCHOR AND IMAGE     PRODUCT INFORMATION FROM PRODUCTSPECIFIC URL

$(function(){
    $('.prdContainer .prdHero').each(function(i){

        var $parent = $(this).closest('.prdContainer');

        $(this).load(('http://www.domain.com .product:nth-child(' + (i + 1)+ ') .productMainImage'), function(){

            var prdLink = $parent.find('.prdHero .productMainImage').attr('href');

            $parent.find('.prdDesc').each(function(){
                $(this).load(prdLink + ' ' + '.productHeading, .productReviews, .productWasPrice, .productNowPrice, .productSavePrice'); //.pluck-review-rollup-output-line
            });

            $parent.find('#prdDetails').each(function(){
                $(this).load(prdLink + ' ' + '#productDescription');
                $('.prdDetails').show();
            });

        });
    });
});

第二步：

EMPTY DIV                           EMPTY DIV
EMPTY DIV                           EMPTY DIV
EMPTY DIV                           EMPTY DIV

LOADED PRODUCT ANCHOR AND IMAGE     EMPTY DIV
LOADED PRODUCT ANCHOR AND IMAGE     EMPTY DIV
LOADED PRODUCT ANCHOR AND IMAGE     EMPTY DIV

LOADED PRODUCT ANCHOR AND IMAGE     PRODUCT INFORMATION FROM PRODUCTSPECIFIC URL
LOADED PRODUCT ANCHOR AND IMAGE     PRODUCT INFORMATION FROM PRODUCTSPECIFIC URL
LOADED PRODUCT ANCHOR AND IMAGE     PRODUCT INFORMATION FROM PRODUCTSPECIFIC URL

$(function(){
    $('.prdContainer .prdHero').each(function(i){

        var $parent = $(this).closest('.prdContainer');

        $(this).load(('http://www.domain.com .product:nth-child(' + (i + 1)+ ') .productMainImage'), function(){

            var prdLink = $parent.find('.prdHero .productMainImage').attr('href');

            $parent.find('.prdDesc').each(function(){
                $(this).load(prdLink + ' ' + '.productHeading, .productReviews, .productWasPrice, .productNowPrice, .productSavePrice'); //.pluck-review-rollup-output-line
            });

            $parent.find('#prdDetails').each(function(){
                $(this).load(prdLink + ' ' + '#productDescription');
                $('.prdDetails').show();
            });

        });
    });
});

第三步：

EMPTY DIV                           EMPTY DIV
EMPTY DIV                           EMPTY DIV
EMPTY DIV                           EMPTY DIV

LOADED PRODUCT ANCHOR AND IMAGE     EMPTY DIV
LOADED PRODUCT ANCHOR AND IMAGE     EMPTY DIV
LOADED PRODUCT ANCHOR AND IMAGE     EMPTY DIV

LOADED PRODUCT ANCHOR AND IMAGE     PRODUCT INFORMATION FROM PRODUCTSPECIFIC URL
LOADED PRODUCT ANCHOR AND IMAGE     PRODUCT INFORMATION FROM PRODUCTSPECIFIC URL
LOADED PRODUCT ANCHOR AND IMAGE     PRODUCT INFORMATION FROM PRODUCTSPECIFIC URL

$(function(){
    $('.prdContainer .prdHero').each(function(i){

        var $parent = $(this).closest('.prdContainer');

        $(this).load(('http://www.domain.com .product:nth-child(' + (i + 1)+ ') .productMainImage'), function(){

            var prdLink = $parent.find('.prdHero .productMainImage').attr('href');

            $parent.find('.prdDesc').each(function(){
                $(this).load(prdLink + ' ' + '.productHeading, .productReviews, .productWasPrice, .productNowPrice, .productSavePrice'); //.pluck-review-rollup-output-line
            });

            $parent.find('#prdDetails').each(function(){
                $(this).load(prdLink + ' ' + '#productDescription');
                $('.prdDetails').show();
            });

        });
    });
});

这就是我所拥有的，它正是我所希望的：

EMPTY DIV                           EMPTY DIV
EMPTY DIV                           EMPTY DIV
EMPTY DIV                           EMPTY DIV

LOADED PRODUCT ANCHOR AND IMAGE     EMPTY DIV
LOADED PRODUCT ANCHOR AND IMAGE     EMPTY DIV
LOADED PRODUCT ANCHOR AND IMAGE     EMPTY DIV

LOADED PRODUCT ANCHOR AND IMAGE     PRODUCT INFORMATION FROM PRODUCTSPECIFIC URL
LOADED PRODUCT ANCHOR AND IMAGE     PRODUCT INFORMATION FROM PRODUCTSPECIFIC URL
LOADED PRODUCT ANCHOR AND IMAGE     PRODUCT INFORMATION FROM PRODUCTSPECIFIC URL

$(function(){
    $('.prdContainer .prdHero').each(function(i){

        var $parent = $(this).closest('.prdContainer');

        $(this).load(('http://www.domain.com .product:nth-child(' + (i + 1)+ ') .productMainImage'), function(){

            var prdLink = $parent.find('.prdHero .productMainImage').attr('href');

            $parent.find('.prdDesc').each(function(){
                $(this).load(prdLink + ' ' + '.productHeading, .productReviews, .productWasPrice, .productNowPrice, .productSavePrice'); //.pluck-review-rollup-output-line
            });

            $parent.find('#prdDetails').each(function(){
                $(this).load(prdLink + ' ' + '#productDescription');
                $('.prdDetails').show();
            });

        });
    });
});

但是

它会在收到内容后立即加载并显示内容。我希望所有内容都继续加载，直到最后一个内容加载并同时显示，而不是逐个加载并显示

---

有人知道我如何做到这一点吗？

这个想法是对已执行的加载调用进行计数，当它达到零时，显示容器：

$(function(){
    $('.prdContainer').hide();
    var loadCallsCount = $('.prdContainer .prdHero').length * 2;

    $('.prdContainer .prdHero').each(function(i){

        var $parent = $(this).closest('.prdContainer');

        $(this).load(('http://www.domain.com .product:nth-child(' + (i + 1)+ ') .productMainImage'), function(){

            var prdLink = $parent.find('.prdHero .productMainImage').attr('href');

            $parent.find('.prdDesc').each(function(){
                $(this).load(prdLink + ' ' + '.productHeading, .productReviews, .productWasPrice, .productNowPrice, .productSavePrice', function() {
                    loadCallsCount -= 1;
                    if (loadCallsCount == 0) $('.prdContainer').show();
                }); //.pluck-review-rollup-output-line
            });

            $parent.find('#prdDetails').each(function(){
                $(this).load(prdLink + ' ' + '#productDescription', function() {
                    loadCallsCount -= 1;
                    if (loadCallsCount == 0) $('.prdContainer').show();
                });
                $('.prdDetails').show();
            });

        });
    });
});

---

在初始容器上添加一个display none，并在最后的加载操作中添加一个display block我正要解释如何使用

.when（）

函数，直到我意识到您正在使用

.load（）

重新编写DOM，导致一系列事件，每个事件都有DOM更改。这是我永远不会做的事。我将改为使用

.get（）

，并使用JSON数据以JavaScript而不是服务器编写HTML。由于设计选择的不同，我修改了我的原始答案，但想发表评论，为未来的项目提供一个不同的视角。