当图像进入浏览器的可见部分时加载图像？ [关闭]答案

【问题标题】：Make images load when they enter visible section of browser? [closed]当图像进入浏览器的可见部分时加载图像？ [关闭]
【发布时间】：2010-12-16 17:05:04
【问题描述】：

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

当您向下浏览页面时，仅当图像位于浏览器的可见部分时才会加载图像。我以前从未见过这种情况，我想知道其他人是否有过这种情况，以及具体是如何做到的。

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

【问题讨论】：

附带说明，如果您一次性完成所有下载而不是多次短暂下载，手机会消耗更少的电量。此插件可能会缩短用户的手机电池寿命。我认为影响很小，但值得注意。这是一个技术讲座，它对此进行了比我以往任何时候都更认真的测量：youtube.com/watch?v=Il4swGfTOSM 他们基本上建议在用户滚动一点后将所有非首屏内容作为二次下载一次全部加载。跨度>

标签： javascript jquery ajax image

【解决方案1】：

如果您查看您引用的页面的源代码，它包含以下代码：

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

【讨论】：

【解决方案2】：

“wp-content/plugins/jquery-image-lazy-loading”

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

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

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

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

【讨论】：

根据其网站，LazyLoad 插件不再可用。请参阅下面的答案。
延迟加载始终可用。它从未被移除。然而，即使删除了 src 属性，新浏览器也会坚持加载图像。因此，您现在必须修改 HTML 才能使其正常工作。我终于有时间更新文档了。还删除了所有不再起作用的旧代码。

【解决方案3】：

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

“出现”插件对我来说效果很好。

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

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

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

【讨论】：

在我写答案的时候（大约 9 个月前），LazyLoad 没有由其作者维护。也许作者现在又开始着手研究了。请记住问题的回答日期。
jquery-appear 已从 Google 代码中消失（哈哈！）。 LazyLoad 似乎（哈哈！）复活了，见appelsiini.net/projects/lazyload。

【解决方案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/

【讨论】：