首页 > html首页 如何解决banner大图加载太慢的问题?

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

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


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

我现在的移动端项目,也涉及了这个问题;我这边是这样实现的:
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" />");这种方式加载;


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

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

【热门文章】
【热门文章】