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 回答