图像延迟加载响应式布局？

Question

我看到了诸如

之类的文章

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

要求您指定图像宽度和高度，但由于我们的网站使用自适应布局，即通过CSS将图像宽度设置为100％，是否仍然可以执行延迟加载？ （我已尝试过上述两个库但它们不起作用）

那么，为响应式布局进行延迟图像加载的推荐方法是什么？

Answer 1

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

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

如您所见，还支持“响应式”srcset属性（请参阅项目页面上的演示）。然后注册加载事件。如果您想通过滚动加载，例如：

Justlazy.registerLazyLoadByClass("justlazy-placeholder");

如果您需要更多灵活性，还可以手动启动延迟加载。