如何按顺序加载图像?

我正在开发一个长滚动网站,其中包含许多完整的背景高分辨率图像。 由于所有图像默认并行加载,因此加载时间过长。

所以在我自定义写东西之前首先加载后来会发生什么(这样第一个滚动几乎会立即加载,用户将在读取第一部分时等待剩余部分:P),是否有任何脚本开箱即用吗?

我正在考虑一些现有的代码,它们将读取每个img标签或background-image属性/ style-attribute,并根据它们在HTML上的外观或一些额外的属性顺序加载图像。

我更喜欢vanilla JS或jQuery。 如果我找不到它,我会自己写一个插件,投票/鼓励接受!

我会尝试使用像LazyLoad这样的插件: http : //www.appelsiini.net/projects/lazyload

有一个阈值将开始在屏幕外加载图像一定数量的像素。 这样,当访问者开始向下滚动时,它将开始加载接下来的几个部分。

我创建了一个jQuery插件来实现这一目标。 看看这个! 这是一项正在进行的工作,欢迎您发表评论和建议! 我从Lazy Load中拿走了很多东西。

https://github.com/mspivak/sequencial_load