素材牛VIP会员
pc网站层 图片的优化
 lo***68  分类:Html5  人气:1636  回帖:5  发布于6年前 收藏

在网站层上运用到了banner图片的滚动(使用了background-image) 现在有个问题是网站层的banner有点多 在加载的时候总是先加载图片(图片在200k以内) 导致了一些核心的js加载慢。有优化的方法吗?

讨论这个帖子(5)垃圾回帖将一律封号处理……

Lv3 码奴
凤***奇 职业无 6年前#1

1,合成雪碧图,通过background-position 控制
2,换成 img 标签,在展示第一张banner之前,指定第一张图片的src,需要展示第二张banner之前指定第二张图片的src,然后在img的onload事件中切换banner

Lv4 码徒
cx***de 页面重构设计 6年前#2

1.图片懒加载

把background-image设置为空或弄张占位图片
给每张图片添加个attr,比如data-original存图片链接
banner每次触发滚动将background-image替换为data-original即可

2.用CDN加速

Lv4 码徒
静***5 Linux系统工程师 6年前#3

一开始banner只放第一张显示的图,在第一张显示的图加载好了之后,在用js向banner添加其他其他的图并加载

Lv1 新人
一***牛 职业无 5年前#4

加延时

Lv1 新人
qq***75 职业无 3年前#5
最后一张和第一张相同会好一点
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取