图像延迟加载响应式布局

Image lazy loading for responsive layout?

本文关键字：布局 响应 延迟加载 图像      更新时间：2023-09-26

我看到像

这样的库
  • http://www.appelsiini.net/projects/lazyload
  • http://luis-almeida.github.io/unveil/

要求你指定图像的宽度和高度，但我们的网站是使用响应式布局，即设置图像宽度100%通过CSS，它仍然可以执行延迟加载吗?(我已经尝试了以上两个库，他们不工作)

那么，对于响应式布局，推荐的延迟图像加载方法是什么呢?

您可以尝试justlazy库。在加载图像之前，您不必提供img标记。只需在加载图像之前定义一个占位符，例如:

<span data-src="default/image" data-alt="some alt text"
      data-srcset="small/image 600w, big/image 1000w"
      class="justlazy-placeholder">
</span>

可以看到，也支持"responsive" srcset属性(参见项目页面上的演示)。然后注册加载事件。如果你想通过滚动加载，例如:

Justlazy.registerLazyLoadByClass("justlazy-placeholder");

如果您需要更大的灵活性，还有一个函数可以手动启动延迟加载

相关文章：