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

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");

如果你需要更多的灵活性，还有一个手动启动延迟加载的功能。