如何通过稍后加载小部件或图像来加快页面加载速度？

Question

我有一个网站列出了首页上的列表，就像博客的归档页面一样。 页面在页面上有很多图像，页面有很多功能。

我想要一个功能，只要他们在焦点之前聚焦它们就会显示图像。喜欢[hanselman blog]

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

我想对此进行跟进并向我提出最好的建议： -

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

我希望像汉塞尔曼博客hanselman.com/一样展示图片，如果你专注于帖子，那么他们会向你展示图像[不是为了表演而是看起来像魅力]，

你知道这件事是他们的好事。 [jQuery readymade脚本或插件]

Answer 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的插件。