javascript - html首页 如何解决banner大图加载太慢的问题？

Question

banner 无缝轮播，想要在页面加载的时候先加载第一张图，等轮播到第二张图片的时候第二张图片再加载出来 ，如何实现？

Answer 1

首先声明，不知道你的服务器架构适不适合；

我现在的移动端项目，也涉及了这个问题；我这边是这样实现的：
1，轮播第一张改用base64加入首页html流，页面加载完毕后（第二屏懒加载；所以，加载完毕基本等于第一屏所有组件、图片加载完毕）；
2，延时触发轮播（延时是基于集群的相应时间自动调整的），
3，轮播的第一步是异步加载轮播图片；预加载下一图放入local.storage；
4，第二图加载完毕，触发定时器动画；触发第三图加载放入local.storage；
5，.......循环；
N，发现local.storage中的第一图，绕过加载，直接触发延时动画；

项目使用了anguler加载图片也是ng-src实现了；原生JS请使用其他属性值替换src，js取属性值赋值src；也可以使用$("<img class="roller_item" />");这种方式加载；

Answer 2

有一个比较简单粗暴的方法，lazyload，实现方法就是看看突然是否存在浏览器页面之内，或者你是无缝轮播，那可以在轮播切换时触发一个方法把src赋值给标签。但一般无缝轮播的话估计只会做loading图处理，要不然每一个滚动过来图片都是空的，体验较差…具体实现方法就是创建一个img标签，或者new一个image对象，监听onload之后把src赋值给实际图片

不懂的话可以看看一个挺出名的插件lazyloader的源码