文章详情页
前端 - 如何加速css background图片的加载速度
浏览:52日期:2023-08-14 17:37:10
问题描述
我在我的一个页面中,用了几处css background设置为图片的, 图片大概就是几十K这样..现在 首次 打开网页时, 这几处地方明显加载慢, 看起来像是样式全部加载完之后, 图片才刷出来..有什么方法可以加快css加载; 或者说.让这些图片加载起来和看起来页面同步一些,不会留着一些空白等待加载!用的nginx,上了https和http2...有什么解决方案,不一定是加速.
问题解答
回答1:果断就懒加载吧,简单好用
回答2:预加载图片,加入loading层,性能略有下降,但是体验好很多
回答3:一个页面用到多处可以首先减少请求数先把图片处理成一张sprite图,,然后再对图片进行压缩,其实还是具体问题具体分析,最好是可以看到比较具体的代码
回答4:静态资源可以放到cdn上,图片很大的话,建议预加载或者懒加载。懒加载时,建议用css提前占位,以免造成不必要的reflow。另:图片偏大的话,不建议使用雪碧图。
回答5:1.最懶的方法用lazyload
回答6:首先 雪碧图 自是不用说 当然 你也得看大小而定
其次 看图片所在的区域 如果有部分图片不在即视区的话 可以使用懒加载
如果以上条件都不满足 就可以通过图片压缩 来减小图片尺寸
标签:
CSS
相关文章:
1. angular.js - 怎样在使用ng-repeat属性的标签里面监听单个事件,使其能够单个改变CSS。2. css - .clearfix:after中为什么设置display: table3. 请教: 关于 python 反斜杠转义的疑问4. nginx英文文档的WebSocket proxying部分没看太明白,麻烦推荐一点中文文章5. angular.js - js 点击事件onclick=“”,引号内的函数名字 可以为 变量吗6. android 文件File删除问题7. python - 关于matplotlib的x轴显示的问题8. mysql优化 - mysql慢查询copying to tmp table9. html5 - CSS画五角星画的不正10. css - transform: translateY(-50%)在360浏览器极速模式下使得文字变模糊了
排行榜
