懒惰加载整个DIV，而不是单个图像

我有一个网页，这是一个侧面滚动。目前所有的内容都是在网页加载时加载的，但这会变成一个巨大的页面！我将一些惰性负载应用于图像等......但它不够流畅，页面在尝试导航时感到尴尬。懒惰加载整个DIV，而不是单个图像

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

我已经看过无数jQuery脚本和方法，但我不能只是似乎把我的头围绕如何特别做到这一点。这就像延迟加载，但对于整个div而不仅仅是一个图像。我希望页面能够加载背景，但是阻止用户看到尚未下载的窗格3，显示加载图像的尴尬景象。

然后我意识到这容易吗？我错过了什么？

2012-08-15 Robert E

可能重复[使图像负载，当他们进入浏览器的可见部分？]（HTTP：/ /stackoverflow.com/questions/1736215/make-images-load-when-they-enter-visible-section-of-browser） – 2012-08-15 14:40:15

，有许多方法来实现这一点，最简单的一个我想简单地使用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-15 14:27:04 derki

你可能想的jQuery的。

来源

2012-08-15 14:40:05

您可以使用与转换和媒体查询，类似于我做了懒图像加载这里CSS招：http://podlipensky.com/2013/06/css-only-load-images-on-demand/

来源

2013-06-05 17:02:55

懒惰加载整个DIV，而不是单个图像

回答

相关问题