javascript – jQuery图像延迟加载仍然是优化Web加载速度的解决方案

2019年8月3日 151次阅读

前段时间,我注意到很少有大型设计博客,如SmashingMagazine,Noupe和其他人在他们的形象上实施延迟加载.我想这有助于优化其加载时间并节省服务器资源.

然后我来到这个jQuery lazyload的图像,但插件坏了,不适用于新的浏览器.想知道lazyload仍然建议优化网站吗？

最佳答案 这取决于您拥有多少图像以及它们有多重要,有许多解决方案可以改善您的性能(
you can find a presentation about the topic here),其中大部分取决于您的网站组织方式以及我们的需求.

所以,如果你的网站有很多小图标可以在很多不同的地方重复使用(like amazon does),你可以使用CSS精灵,你可以使用直接编码在HTML上的图像,就像谷歌一直在做很多而你可以做懒惰 – 这一切都取决于你的情况.

但是回到延迟加载插件,查找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") );
} );

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

点赞