正常情况下，网页中的图片是随着 DOM 流加载的，这样有两个问题：
1 、图片没有下载完成就显示出来，造成显示时图片不完整，用户网络环境恶劣时体验糟糕。
2 、一个页面存在多个图片时，浏览器是并行下载的，并不能保证在页面前面的图片就先显示出来，所以更应该让页面前面的图片先加载，尽快给用户展示一个完整的页面，而页面后面的图片就可以慢慢加载。
3 、当用户硬性刷新页面时，延时加载图片可以做到依然读取缓存，这样可以减少不必要的 CDN 流量。
项目地址： https://github.com/Sneezry/image-delay.js
Live Demo ： http://sneezry.github.io/image-delay.js/example/
查看 Demo 时打开 Chrome 控制台，在 Networking 中将网络环境模拟成比较糟糕的情况（比如 Good 3G ）可以更加清晰地看到加载过程，同时尝试硬性加载，可以看到后面几幅图片都是从缓存中读取的。
MIT License.
 |
1
pein Sep 14, 2015
图片延时加载和图片预加载（ new Image ()）哪个比较好？使用效果上来说貌似是差不多的。
|
 |
3
X-Force Sep 14, 2015
这个可以和 srcset 兼得么？
|
|
6
pein Sep 14, 2015
看了下 js 文件，有几个问题想问一下
1 ， background 图片可通过增加 data-image-delay-wait 来实现图片“加载完成后显示”，但似乎没有看到检测图片是否加载完毕的代码，只有 onload 事件，没有 complete? 2 ， background 图片可通过增加 data-image-delay-wait 来实现图片“加载完成后显示”，但<img>似乎只有延迟（顺序）加载而没有“完成后显示”功能？ 3 ，文件最底下为什么有两个 setTimeout ？ 上述的问题可能会导致，如果图片很大的话，应该还是会出现图片显示一半的情况（没实际测过，猜的）。 |
 |
7
sneezry OP @pein 感谢反馈 :-D
1 ， onload 是个通用的做法， complete 需要轮询（如果有错误请指出） 2 ， img 标签没有提供 data-image-delay-wait 方法，后续我会扩充 :-D 3 ，第一个 setTimeout 是为了达到强刷延时加载图片依然走缓存的目的，第二个是防止 window.onload 不触发导致图片不加载的问题，第二个延时时间可以通过 html 标签的 data-delay-timeout 属性设置 图片过大确实会出现显示一半的情况， live demo 里就出现了，哈哈 |
 |
8
imxz Sep 14, 2015
有个 lazyload 貌似实现了同样的效果
|
 |
9
fstab Sep 14, 2015
总觉得花瓣的效果最赞。
|
|
10
sneezry OP @imxz lazyload 是一个非常出色的作品，它不仅仅支持图像的惰性加载，甚至还支持框架的惰性加载。但是遗憾的是 lazyload 并没有针对图像延时加载做过多优化， lazyload 更适合长页面的应用场景，另外好像也没有对背景图片做支持，希望 lazyload 和 image-delay.js 协同起来能给大家带来更大的便利 :-D
|
|
11
pein Sep 14, 2015
@sneezry 嗯，看代码这个确实能做到顺序加载，但是“加载完显示”问题不解决的话，直观上来说顺序显示图片是做不到的，因为先加载的不一定就先显示，比如前面的图片大后面的小，就可能导致后加载的图片反而先显示，而且前面图片加载一半的情况也会出现。想象一下：前面的大图加载了一半，中间的一片空白还没加载，后面的小图都加载完了。。。
|
|
12
sneezry OP @pein 确实是这样的，苹果的做法是把 DOM 的框架做好，这样不会出现出一张图，整体布局串一下。但是苹果没有做顺序加载，而是做了并行加载，原因是使用了延时加载的图都在页面的后半部分，很少有用户打开页面就马上往下滚动。并行加载的好处是速度快，缺点就是提到的加载完成顺序不可控。我会继续优化，增加顺序加载和加载完成后再显示的属性的 :-D
|
 |
14
seyang1025 Sep 14, 2015
不都是 加载当前么，当前在哪个位置，就加载哪里
|
 |
15
g0thic Sep 14, 2015
不错，英语真 binag
|
 |
16
wsph123 Sep 14, 2015  1
点击浏览器后退按钮时 可能会跳过 onload 事件，这时候需要通过 complete 进行判断是否已经载入成功
|
 |
18
catoncat Sep 16, 2015
lz 请教个问题，类似 img 标签的 lowsrc 属性，实现如果 background 图片太大的话，先加载较小的图片，等大图下载完之后再替换应该怎么搞。写两个 class 吗？
|
 |
20
zqjilove Sep 16, 2015
看着感觉用起来很麻烦的感觉
|
Select Language