1

我如何才能显示按钮，直到它们从外部源完全加载。在加载按钮之前，有一个 gif 预加载器，表示加载正在进行中。我发布的代码正在显示按钮，但它一个一个地加载，而不是同时加载。

我的代码是：

<div class="social-holder">
        <div class="social-buttons-holder">

        </div>
</div>

当用户将鼠标悬停在具有类“social-holder”的 div 上时，将从名为“social”的外部页面加载按钮。

$('.social-holder').hover(function(){
    if($(".social-buttons").length > 0){
        $('.social-buttons-holder').show();
    } 
    else {
        $('.social-buttons-holder').addClass('preloader');
        $('.social-buttons-holder').load('/social', function() {
            $('.social-buttons-holder').removeClass('preloader');
        });
    }
}, function(){
    $('.social-buttons-holder').hide();
});

外部页面的结构是：

<div class="social-buttons">
    <div class="social-button">

    </div>
    <div class="social-button">

    </div>
    <div class="social-button">

    </div>
</div>

每个带有“social-button”类的 div 都包含社交按钮的标准代码，所以我不会在这里发布。因此，当用户将鼠标悬停在具有类“social-holder”的 div 上时，具有类“social-buttons”的 div 将被加载到具有类“social-buttons-holder”的 div 内。如果尚未加载社交按钮，则会将“预加载器”类添加到显示预加载器 gif 图像的 div 中。当 Jquery 加载加载外部内容时，“预加载器”类被删除，但按钮在它们的 iframe 中一一加载，我希望它们同时加载，因为预加载器应该隐藏它们的加载过程

4

0 回答 0