it-swarm-eu.dev

Jak mohu povzbudit prohlížeč, aby stahoval obrázky ze souboru CSS rychleji?

Používám CSS k umístění mnoha mých obrázků (jako pozadí pro <div>) a často zjistím, že se načítají velmi pomalu tímto způsobem. Zdá se, že jsou poslední věcí, kterou načíst. Dokonce i malé malé obrázky ikon se chvíli projeví. Existuje způsob, jak určit prohlížeči obrázky jako prioritu? Nebo si ji nechte stáhnout obrázky v souboru CSS dříve a vykreslit je dříve?

13
Daniel Bingham

CSS je pro styling, ne pro obsah. Prohlížeče (správně) zkoušejí a zobrazují obsah před přidáním stylingu, proto je důvod, proč se obrázky v seznamech stylů stahují obvykle jako poslední. Pokud jsou obrázky důležité pro vaše obsah, přidejte je pomocí standardních značek HTML <IMG>.

10
Dan Diplo

Použijte absolutní URI z vaší šablony stylů a přidejte obrázky ze značek IMG do skrytého <div> na stránce (předpokládá se, že na každé stránce používáte stejné obrázky; ideálně v zápatí, takže jsou všechny načteny a uloženy do mezipaměti při každém daném volání stránky).

Obrázky na stránce mají prioritu a jakmile jsou obrázky uloženy do mezipaměti, vykreslí se okamžitě na další žádosti o stránku.

5
danlefree

V případě prohlížečů, které podporují typ URI dat (viz http://en.wikipedia.org/wiki/Data_Uri pro informace), vložte obrázek do samotného CSS.

To má však několik nevýhod:

  • Data jsou znovu načtena, když je CSS, místo aby byly odděleně ukládány do mezipaměti, ale pokud se váš CSS pravidelně nemění, není to problém.
  • Nedostatek dědičnosti CSS a takových prostředků může nastat časy (ztráta šířky pásma), pokud musíte zahrnout stejný graf vícekrát nebo změnit třídy použité v dokumentu.
  • Obrázky jsou při použití tímto způsobem zakódovány, což znamená, že zabírají větší šířku pásma (i když problém s šířkou pásma je mnohem méně významný, pokud odesíláte komprimovaná data).
  • Pro prohlížeče, které nepodporují datové URI, budete muset poskytnout alternativní styly, z nichž některé nejsou zdaleka neobvyklé (například IE6 a IE7).
2
David Spillett

Použijte CSS sprites , zejména pro ikony.

1
Bobby Jack

Udělejte své obrázky co nejmenší. Pomocí smush.it můžete odstranit zbytečné bajty.

1
Emily

Od nynějška neexistuje způsob, jak určit, které soubory stahovat jako první. FYI, obrázky určené v souborech CSS jako stahování obrázků na pozadí poslední pravděpodobně proto, že prohlížeč je vidí bez obsahu, a proto mají nižší prioritu, takže je nepoužívejte pro důležité obrázky, které chcete rychle načíst.

1
John Conde