Question

我目前正在通过包含更多产品的图库页面上的.load将产品加载到我的页面上。

一旦这些产品（前3个）加载完毕，我就会获得加载的href，然后再次.load以从产品页面获取产品特定信息。

第一步：

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();
            });

        });
    });
});

BUT !!!

一旦获取内容，它就会加载并显示内容。我希望一切都能继续加载，直到最后一件事物已加载并立即显示，而不是加载并逐一显示。

有没有人知道如何实现这个目标？

Answer 1

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

$(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();
            });

        });
    });
});

jQuery .load - 仅在所有功能完成后显示？

1 个答案: