html首页 如何解决banner大图加载太慢的问题? -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

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

杨冬芳 2016-06-06 13:56:57 4032

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

分享到
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:28:27

    ;我是这样实现的:
    1,轮播第一张改用base64加入首页html流,页面加载完毕后(第二屏懒加载;所以,加载完毕基本等于第一屏所有组件、图片加载完毕);
    2,延时触发轮播(延时是基于集群的相应时间自动调整的),
    3,轮播的第一步是异步加载轮播图片;预加载下一图放入local.storage;
    4,第二图加载完毕,触发定时器动画;触发第三图加载放入local.storage;
    5,.......循环;
    N,发现local.storage中的第一图,绕过加载,直接触发延时动画;

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

    0 0
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

推荐文章