jQuery图像延迟加载是优化web加载速度的解决方案吗

Question

不久前，我注意到像SmashingMagazine，Noupe和其他一些大型设计博客在他们的图像上实现了延迟加载。我认为这有助于优化它们的加载时间并节省服务器资源。

然后我转到这个用于图片的jQuery lazyload，但是这个插件坏了，不能在新浏览器上工作。想知道lazyload是否仍然被推荐用于优化网站？

Answer 1

这取决于您有多少图像和它们的重要性，有许多解决方案可以提高您的性能( you can find a presentation about the topic here)，其中大多数取决于您的网站是如何组织的，以及我们的需求是什么。

所以，如果你的网站有很多在不同地方( like amazon does )重复使用的小图标，你可以使用CSS sprites，你可以使用直接在超文本标记语言上编码的图像，就像谷歌已经做了很多事情，你可以做懒惰加载，所以这一切都取决于你的情况。

但是回到延迟加载插件，寻找javascript错误或类似的东西，如果它不工作，你甚至可以为自己构建一个延迟加载程序，应该不会那么复杂。这里有一个可能会起作用的黑客(我没有运行它，所以我不能确定)：

<img lazy_loaded_src="/some_image.jpeg" class="lazy_loaded"/>

然后在JavaScript中：

jQuery( "img.lazy_loaded" ).each( function () {
  var image = jQuery( this );
  image.attr( "src", image.attr("lazy_loaded_src") );
} );

只要您在页面加载之后执行此操作，就应该具有相同的延迟加载行为。

Answer 2

奇怪的是，它已经坏了。也许它与你的jQuery版本有冲突？

我使用懒惰的图像加载。在某些情况下，这是一种很好的技术。