1

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

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

我已经查看了许多 jquery 脚本和方法，但我似乎无法完全理解如何具体实现这一点。这就像延迟加载，但对于整个 div 而不仅仅是图像。我希望页面在后台加载，但要防止用户例如看到尚未下载的窗格 3，显示图像加载的尴尬景象。

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

4

3 回答 3

0

您可能想要 jQuery 的出现插件。

于 2012-08-15T14:40:05.390 回答
0

您可以在过渡和媒体查询中使用 CSS 技巧，类似于我在这里为延迟图像加载所做的：http: //podlipensky.com/2013/06/css-only-load-images-on-demand/

于 2013-06-05T17:02:55.067 回答
0

有很多方法可以实现这一点，我想最简单的一种方法是简单地使用 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
    }
});
于 2012-08-15T14:27:04.537 回答