如何进行延迟/延迟加载资源

时间:2010-01-29 11:38:21

标签: javascript jquery optimization dom lazy-loading

我有一个相当长的页面,其中包含Google地图,图片滑块,Google广告,BrightCove视频(可选)和图片等部分。在没有JS的情况下加载很快很快,而在JS上加载速度稍慢。

我看到了this site,并且想知道是否有人使用过类似的方法或其他任何一个允许这些项目在其他所有内容完成时加载的情况,在某些情况下直到用户将项目滚动到视图中才会加载?

干杯, 丹尼斯

2 个答案:

答案 0 :(得分:1)

作为一个起点,您可以使用jQuery加载功能来加载您知道需要更长时间的某些位(例如谷歌地图)。这非常简单,可以通过以下方式实现:

jQuery(function(){
  // Load google map
  jQuery('#map-holder').load('/resources/lazy/map-loader.ext?q=' + an_id);

  // Load similar properties
  jQuery('#similar-properties').load('/resources/lazy/similar-properties.ext?q=' + an_id);
});

然后使用延迟加载插件,我确定你可以将上面的调用放在函数中并将它们连接到延迟加载插件。

答案 1 :(得分:0)

好的,我正在做的是在启动时使用http://labjs.com/在页面上我需要的js资源,然后使用http://www.codeproject.com/KB/ajax/selfloadelement.aspx作为加载无法添加的部分的方法初始加载后到页面。