jquery - 延迟加载整个DIV，而不是单个图像

我有一个网页是侧面滚动器。目前所有内容都加载到页面加载中，但这正变成一个巨大的页面！我对图像等应用了一些延迟加载，但是它不流畅，页面导航很尴尬。

有7个“窗格”，每个窗格都有一个具有唯一ID的父DIV标签。我想做的是当Pane 2出现时，显示一个加载的gif，并且div为空白，直到所有内容/图像都加载完毕。加载内容/图像后，加载器消失，内容逐渐淡入。对于所有窗格2-7重复此操作。

我已经看过许多jquery脚本和方法，但是我似乎并没有全神贯注于如何做到这一点。这就像延迟加载，但对于整个div而言，而不仅仅是图像。我希望页面加载到后台，但是例如，阻止用户看到尚未下载的窗格3，这显示了加载图像的尴尬场面。

我知道这容易吗？我想念什么？

最佳答案

有很多方法可以实现这一目标，我想最简单的方法就是使用jQuery get方法获取活动幻灯片的实际HTML：

$.get('slide2.html', function(respHTML) {
   $(respHTML).appendTo($("#contentFrame"));
},'html');

您可以在添加html并预加载图像之前选择所有图像，还有很多方法可以预加载图像

var respHTML = $(respHTML);
var imagesToPreload = respHTML.find('img');
var imagesPreloaded = 0;
var imagesLength = imagesToPreload.length;
imagesToPreload.each(function(i,img) {
    // preload img
    imagesPreloaded++;
    if(imagesPreloaded == imagesLength) {
       // your images are ready
    }
});

关于jquery - 延迟加载整个DIV，而不是单个图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11970804/