Précharger les polices et les images?

Sur la page d'accueil de mon site, je voudrais précharger les polices et les images utilisées sur d'autres pages du site, pour éviter les FOUC.Précharger les polices et les images?

Quelle est la meilleure façon de faire cela?

Pour les polices j'ai actuellement ce code sur ma page d'accueil mais je suis sûr qu'il y a un meilleur moyen.

<div id="font-load1">aaa</div> 
<div id="font-load2">aaa</div>

Et puis dans style.css pour cacher le texte:

#font-load1{ 
    font-family:"BellMTItalic"; 
    font-style:italic; 
    text-indent: -900%; 

} 
#font-load2{ 
    font-family:"SavoyeLETPlain"; 
    text-indent: -900%; 
}

Merci

Source

2011-10-12 fxfuture

Ne faites pas cela, sauf si vous avez une très bonne raison. Vous gaspillez la bande passante de tout le monde à moins qu'ils visitent les autres pages. – Brad

duplication possible de [Précharger les polices Font-Face pour arrêter Firefox Flicker/Delay] (http://stackoverflow.com/questions/3379645/preload-font-face-fonts-to-stop-firefox-flicker-delay) – JJJ

La méthode la plus simple, ne nécessitant pas de bibliothèques externes, est de placer vos éléments de pré-charge dans un jeu de div display: none.

Source

2011-10-12 19:37:19 knite

testé cela et cela ne fonctionne pas pour les polices. Je pensais que si le div était caché, il ne le rend pas? – fxfuture

Si vous avez besoin de précharger quelque chose, vous devez l'ajouter dynamiquement à un élément caché sur la page après le chargement de la page. Ensuite, vous ne ralentirez pas du tout l'utilisateur car vous ne voulez pas utiliser les connexions disponibles pour votre page Web.

Si vous vous souciez des utilisateurs non-JavaScript, je placerais les éléments cachés comme la dernière chose sur la page. En supposant que les navigateurs continuent de charger les styles dans un contexte descendant, cela ne ralentira pas le reste de la page.

Pour les images, vous pouvez essayer les feuilles de sprites. Ils peuvent bien fonctionner dans votre cas d'utilisation.

Il y a d'autres choses que vous pouvez regarder comme les paramètres de compression et de mise en cache de vos fichiers. Une fois que vous pensez avoir trouvé votre solution, chargez Fiddler et vérifiez que le site fonctionne comme prévu.

Source

2011-10-12 19:44:52 scottheckel

-1

Pour vos images:

JavaScript

function preload() { 
    imageObj = new Image(); 
    images = new Array(); 
    images[0] = 'img/1.png'; 
    images[1] = 'img/2.png'; 
    images[2] = 'img/3.png'; 
    images[3] = 'img/4.png'; 
    images[4] = 'img/5.png'; 

    for (i = 0; i <= 4; i++) 
     imageObj.src = images[i]; 
}

HTML

<body onload="preload();"> 
    .... 

    <!--[if IE]> 
     <div id="preload"> 
      <img src="img/1.png" width="1" height="1" alt="" /> 
      <img src="img/2.png" width="1" height="1" alt="" /> 
      <img src="img/3.png" width="1" height="1" alt="" /> 
      <img src="img/4.png" width="1" height="1" alt="" /> 
      <img src="img/5.png" width="1" height="1" alt="" /> 
     </div> 
    <![endif]--> 
</body>

CSS pour IE

#preload { 
    position: absolute; 
    overflow: hidden; 
    left: -9999px; 
    top: -9999px; 
    height: 1px; 
    width: 1px; 
}

Vous pouvez sûrement précharger les polices de la même manière.

Source

2011-10-12 19:47:23

Les bonnes nouvelles; Il y a une spécification et façon de le faire déclarative:

<link rel="preload" href="/path/to/font/BellMTItalic.woff2" as="font" type="font/woff2"> 
<link rel="preload" href="/path/to/font/SavoyeLETPlain.woff2" as="font" type="font/woff2">

https://w3c.github.io/preload/

http://www.bramstein.com/writing/preload-hints-for-web-fonts.html

Les mauvaises nouvelles:

seulement pris en charge par Chrome et Opera (octobre 2016):

http://caniuse.com/#search=preload

Et comme mentionné @brad, vous aurez besoin d'avoir un taux de rebond extrêmement bas sur votre page d'accueil pour le faire avec une bonne conscience.

Source

2016-10-08 20:01:05 EoghanM

Précharger les polices et les images?

Répondre

Questions connexes