当图像进入浏览器的可见部分时加载图像？

Question

我在网上浏览,看到了一些我以前从未见过的东西.在这个网站上:http: //blogof.francescomugnai.com/2009/04/mega-roundup-of-geektool-scripts-inspiration-gallery/

当您向下浏览页面时,图像仅在浏览器的可见部分中加载.我以前从未见过这个,并且想知道是否有其他人以及如何做到这一点.

我猜这是某种Wordpress插件(这就是他正在使用的),但我不确定.是javascript吗？它们实际上是在页面加载时加载,但稍后会在"时髦"效果中变得可见,或者这对于更快的页面加载时间实际上是否有用？

Answer 1

"可湿性粉剂内容/插件/ jQuery的图像延迟加载"

Lazy loader是一个用JavaScript编写的jQuery插件.它延迟了(长)网页中图像的加载.视口外的图像(网页的可见部分)在用户滚动到它们之前不会被加载.这与图像预加载相反.

在包含许多大图像的长网页上使用延迟加载会使页面加载更快.加载可见图像后,浏览器将处于就绪状态.在某些情况下,它还可以帮助减少服务器负载.

http://www.appelsiini.net/projects/lazyload

因此,它似乎遍历指定的每个图像或元素上下文内部,并在图像完全加载之前用占位符gif替换src,保存原始URI,当图像"可见"时,它用真实替换占位符图片.

Answer 2

根据网站不再提供LazyLoad.显然,代码不再适用于新浏览器,作者没有时间更新它.

"显示"插件对我来说效果很好.

http://plugins.jquery.com/appear/

它允许您为元素指定回调函数.当元素出现在视图中时,将调用回调函数.从网站:

$('#foo').appear(function() {
  $(this).text('Hello world');
});