如何通过稍后加载小部件或图像来更快地加载页面？答案

【问题标题】：how to load page faster by loading widget or image later?如何通过稍后加载小部件或图像来更快地加载页面？
【发布时间】：2011-04-02 05:20:55
【问题描述】：

我有一个网站，它在首页上列出列表，就像博客的存档页面一样。该页面在首页上有许多图像，用于该页面具有的许多功能。

我想要一个功能，只要他们聚焦而不是在聚焦之前显示图像。喜欢 [hanselman 博客]

当我删除我为每个帖子显示的 facebook 或 twitter 小部件时，他们的页面只有 133KB，但如果我使用 Facebook twitter 小部件，则总大小为 2.6 MB [是的，2.6 mb 是 twitter facebook 小部件之后的大小]。

我想这样做，并建议我尽我所能：-

我在页面加载后加载 facebook 或 twitter 小部件，因为如果我在页面加载之前不加载它们，我需要非常快速的性能和更好的页面加载。

我想为像 Hanselman 博客 hanselman.com/ 这样的帖子显示图片

是他们的好东西，你知道这件事。 [jQuery现成脚本或插件]

【问题讨论】：

它被称为惰性加载器，你可以在网上找到插件。

标签： jquery html performance

【解决方案1】：

看Scott的页面源码：

jQuery(document).ready(function($){
    if (navigator.platform == "iPad") return;
    $("#blog-posts img").not('[src*=theloungenet]').lazyload({
    placeholder : "/blog/scripts/lazyload.gif",
    effect : "fadeIn"
  });

});

是一个叫lazyload的插件。

【讨论】：