网站banner尽量不要用css background image的方式调用

镖师 · 发表于 2022-9-6 14:26:00

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

昨天弄个新站，网站banner图片使用css的 background-image 方式调用，结果测试发现，页面所有文件都打开了，只有banner还在慢慢的加载。

起初我以为是图片太大导致的，经过我的压缩，还是无法改变现状，昨晚一直没想通，也找不到原因。本打算使用 JQ 预加载或 lazyload。

刚才经过折腾，不知不觉认为是 background-image 的渲染加载的原因。

最后直接使用 img src ＝的方式，直接调用图片，果然，banner加载非常快。

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
网站部分内容来源于网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

IT618发布 · 发表于 2022-9-6 14:26:26

这是干货，得加精

独家记忆 · 发表于 2022-9-6 14:27:23

玄学，
页面渲染到banner时就会加载对应的css背景图片，
不会比src慢

婷姐 · 发表于 2022-9-6 14:28:21

学习啦，

婷姐 · 发表于 2022-9-6 14:29:01

其实就是你的心里作用罢了。

IT618发布 · 发表于 2022-9-6 14:29:49

写前端真没注意background和img调用速度的区别，特意百度了一下background-image与img性能对比

在segmentfault看到小志大神的回复，我觉得比较中肯，有兴趣可以看一下大神的理解和解答，以下是链接

https://segmentfault.com/q/1010000003064116?utm_source=sf-similar-question