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

Question

我有一个网页，它是一个横向滚动条。目前所有内容都在页面加载时加载，但这正在变成一个巨大的页面!我对图像等应用了一些延迟加载......但它并不流畅，并且页面在尝试导航时感觉很尴尬。

有 7 个“ Pane ”，每个 Pane 都有一个带有唯一 ID 的父 DIV 标记。我想做的是当 Pane 2 出现时，显示加载 gif 并且 div 为空白，直到加载所有内容/图像。加载内容/图像后，加载器消失，内容淡入。这将对所有 Pane 2 - 7 重复。

我看过无数的 jquery 脚本和方法，但我似乎无法全神贯注于如何具体实现这一目标。这就像延迟加载，但对于整个 div 而不仅仅是图像。我希望页面在后台加载，但要防止用户看到尚未下载的 Pane 3，显示图像加载的尴尬景象。

这比我意识到的容易吗？我错过了什么？

Answer 1

有很多方法可以实现这一点，我想最简单的方法就是使用 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
    }
});