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

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

如果您需要更大的灵 active ，还有一个手动启动延迟加载的功能。