我看到像
这样的库- 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");
如果您需要更大的灵活性,还有一个函数可以手动启动延迟加载