Question

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

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

我猜这是某种Wordpress插件（这就是他正在使用的），但我不确定。是javascript吗？它们实际上是在页面加载时加载，但稍后会因“时髦”效果而变得可见，或者这对于更快的页面加载时间实际上是否有用？

Answer 1

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

Lazy loader是一个jQuery插件   在JavaScript中。它延迟了装载   （长）网页中的图像。图片   在视口之外（可见部分）   网页）不会在用户之前加载   滚动到他们。这与之相反   图像预加载。

在长网页上使用延迟加载   包含许多大图像使得   页面加载更快。浏览器将在   装载后可见状态可见   图片。在某些情况下，它也可以提供帮助   减少服务器负载。

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

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

Answer 2

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

“显示”插件对我来说效果很好。

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

它允许您为元素指定回调函数。当元素出现在视图中时，将调用回调函数。来自网站：

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

Answer 3

如果你查看你引用的页面的来源，它包含这段代码：

jQuery(document).ready(function($){
  jQuery(".SC img").lazyload({
    effect:"fadeIn",
    placeholder: "http://blogof.francescomugnai.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif"
  });
});

我怀疑他们是如何完成这种效果的。它使用jQuery LazyLoad插件，可以在这里找到：

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

Answer 4

正如Sanjay指出的那样，Applesiini的jQuery LazyLoad插件不再有效。这是我发现的另一个jQuery插件。除 jQuery Appear 之外，还有另一种选择。

http://plugins.jquery.com/project/LazyLoadOnScroll

http://ivorycity.com/blog/2011/04/19/jquery-lazy-loader-load-html-and-images-on-scroll/

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

4 个答案: