Question

我有一个侧面滚动的网页。目前所有内容都加载到页面加载，但这变成了一个巨大的页面！我对图像等应用了一些延迟加载...但它只是不平滑而且页面感觉很难尝试导航。

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

我已经看过很多jquery脚本和方法，但我不能只是想知道如何让这种情况发生。这就像延迟加载，但对于整个div而不仅仅是图像。我希望页面加载后台，但是例如阻止用户看到尚未下载的窗格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
    }
});

Answer 2

你可能想要jQuery的appear plugin。

Answer 3

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

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

3 个答案: