Le préchargement de l'image ... le moyen le plus rapide

Je travaille sur un projet traitant d'une page web à fort trafic (très haut!). Sur la page de destination des tonnes d'images sont affichées (~ 40), qui doivent être là, juste après que la page ait été chargée pour les afficher en fondu. Nous n'utilisons aucune bibliothèque pour cela puisqu'elle devrait être chargée avant qu'elle ne soit prête utiliser. Nous avons 4 serveurs d'images. Est-ce que quelqu'un a une expérience qui est le meilleur moyen de charger des images? J'ai essayé les éléments suivants:Le préchargement de l'image ... le moyen le plus rapide

En-tête de page, juste après la <head>, inséré une balise de script:

<script> 
    var img = new Image(); img.src= "src of the image"; 
</script>

Ce faisant, les images commencent et finissent à charger avant domready et événement Load. Mais les images sur la page avec la même URL semblent se charger à nouveau, même si elles ont été chargées auparavant. Les URL sont les mêmes, la mise en cache était activée, Mozilla était utilisé.

Peut-être y a-t-il un mécanisme qui empêche le navigateur d'utiliser ces images? ou quoi? Une autre question: est-ce que ça provoque un ralentissement, quand le DOM et les images se chargent en parallèle?

Source

2012-03-07 zak

Utilisez-vous un CDN? –

D'abord, je recommanderais d'utiliser des sprites CSS. Vous trouverez plus d'informations ici:

http://www.alistapart.com/articles/sprites

Deuxièmement, si vous voulez charger les images sur DOM prêt, utilisez ce qui suit:

function listen(event, elem, func) { 
    if (elem.addEventListener) { 
    elem.addEventListener(event, func, false); 
    } else if (elem.attachEvent) { 
    elem.attachEvent('on' + event, func); 
    } 
} 

listen('load', window, function() { 
    var img = new Image(); 
    img.src= "src of the image"; 
});

L'utilisation sprites coupera votre temps de chargement en deux. Vous éliminez la majorité de vos requêtes HTTP et les feuilles de sprites sont mises en cache immédiatement, de sorte que chaque page suivante qu'une visite utilisateur aura déjà chargée.

EDIT

est ici un moyen de pré-charger de nombreuses images:

function preload(images) { 
    if (document.images) { 
    var imageArray = []; 
    imageArray = images.split(','); 
    var imageObj = new Image(); 
    for (var i = 0; i < imageArray.length; i += 1) { 
     imageObj.src = imageArray[i]; 
    } 
    } 
}

Appelez la fonction comme ceci:

preload('image1.jpg,image2.jpg,image3.jpg');

Source

2012-03-07 15:42:00

Cette réponse ne fait pas de préchargement des images. Sprites est une direction à suivre, mais je ne vois pas comment cette réponse résout le problème de préchargement. – jfriend00

Je pense que vous aurez une meilleure expérience utilisateur si les images ont été chargées après le DOM, surtout si votre page est lourde en images. Lorsque vous préchargez, vous demandez à l'utilisateur d'attendre le chargement des images avant de pouvoir afficher votre site. –

Pourquoi le préchargement des images oblige-t-il l'utilisateur à attendre plus longtemps que votre option? L'idée de précharger les images est qu'elles soient disponibles plus tôt et que l'utilisateur attende moins. Le code HTML de la page n'attend pas le chargement des images avant qu'elles soient disponibles pour l'interaction de l'utilisateur. – jfriend00

Le préchargement de l'image ... le moyen le plus rapide

Répondre

Questions connexes