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

【问题标题】：Lazy Load an entire DIV and not individual images延迟加载整个 DIV 而不是单个图像
【发布时间】：2012-08-15 14:08:31
【问题描述】：

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

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

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

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

【问题讨论】：

Make images load when they enter visible section of browser? 的可能重复项

标签： jquery html css scroll lazy-loading

【解决方案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
    }
});

【讨论】：

【解决方案2】：

您可能想要 jQuery 的 appear plugin。

【讨论】：

【解决方案3】：

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

【讨论】：