Frontend – So beschleunigen Sie die Ladegeschwindigkeit von CSS-Hintergrundbildern

Question

Auf einer meiner Seiten habe ich mehrere CSS-Hintergrundeinstellungen als Bilder verwendet. Die Bildgröße beträgt wahrscheinlich Dutzende von Kilobyte.
Wenn ich die Webseite jetzt zum ersten Mal öffne, werden diese Stellen offensichtlich langsam geladen, und es sieht so aus Alle Stile fehlen.
Gibt es eine Möglichkeit, das Laden von CSS zu beschleunigen und synchroner mit der Seite zu sein, ohne dass etwas Leerraum darauf wartet, geladen zu werden?
Ich verwende Nginx und es ist https und http2 verfügbar...
Gibt es eine Lösung, nicht unbedingt eine Beschleunigung?

Answer 1

果断就懒加载吧，简单好用

Answer 2

预加载图片，加入loading层，性能略有下降，但是体验好很多

Answer 3

一个页面用到多处可以首先减少请求数先把图片处理成一张ｓｐｒｉｔｅ图，，然后再对图片进行压缩，其实还是具体问题具体分析，最好是可以看到比较具体的代码

Answer 4

静态资源可以放到cdn上，图片很大的话，建议预加载或者懒加载。懒加载时，建议用css提前占位，以免造成不必要的reflow。另：图片偏大的话，不建议使用雪碧图。

Answer 5

1.最懶的方法用lazyload

Answer 6

首先 雪碧图 自是不用说 当然 你也得看大小而定

其次 看图片所在的区域 如果有部分图片不在即视区的话 可以使用懒加载

如果以上条件都不满足 就可以通过图片压缩 来减小图片尺寸