js image préchargement example_basic connaissances

Exemple simple de préchargement d'image JS

Copier le code Le code est le suivant :

fonction loadImage( url, callback) {
if(url!='null') {
var img = new Image();
img.src = url;
if(img.complete) {
           callback(img);
               else { ;
                                                                                                              > }
}

loadImage(pic_url,loadImage);



Un autre détail exemple

La manipulation du DOM via js est souvent utilisée pour réaliser un chargement asynchrone des éléments html de la page actuelle. Permettez-moi de parler d'une certaine compréhension de l'objet Image.
Regardez un exemple :

Copier le code

Le code est le suivant : < ;input type= "button" name="" value="Charger l'image" onclick="addImg('tt.jpg')" />


Lorsque la page contient le code ci-dessus "tt.jpg" n'est pas chargé à l'ouverture, mais est chargé lorsque l'on clique sur le bouton. Lorsque le chargement est terminé, l'événement onload est déclenché et affiché sur la page.
Si vous chargez l'image "tt.jpg" pour la première fois, elle fonctionnera normalement. Cliquez sur le bouton pour charger et afficher une image. Que se passe-t-il si vous cliquez dessus à plusieurs reprises ?
Dans IE et Opera, sauf lorsque l'image est chargée pour la première fois, elle s'affiche normalement, mais il n'y a ensuite aucune réponse lorsque vous cliquez à nouveau dessus, et il en va de même pour l'actualisation. Ne déclenchent-ils l'événement « onload » qu'une seule fois ? Est-ce un mécanisme de mise en cache ?
Dans FF et Chrom, une image est chargée à chaque fois que vous cliquez dessus.

Modifier légèrement :

Copiez le code

Le code est le suivant :< input type= "button" name="" value="Charger l'image" onclick="addImg('tt.jpg')" />



Après l'avoir exécuté, j'ai découvert que quelque chose d'étrange s'était produit. Tous les navigateurs sont cohérents et chargent une image par clic. Quelle en est la raison ?
On voit que l'événement onload n'est pas déclenché une seule fois lors de l'exécution d'IE et d'Opera !

Pensez à certaines propriétés de l'objet Image, complete, readyState (valeur exclusive IE [non initialisée, complète]) (Veuillez modifier le nom de l'image pour éviter que la mise en cache n'affecte l'effet !)

Copier le code

Le code est le suivant :

Après le test ci-dessus, nous pouvons constater quelques différences, pour l'attribut complet. En d'autres termes, IE juge selon que l'image est affiché, c'est-à-dire que lorsque l'image chargée est affichée, la valeur de l'attribut

complete est vraie, sinon elle est toujours fausse. Cela n'a rien à voir avec le fait que l'image ait été chargée auparavant, c'est-à-dire. , cela n'a rien à voir avec le fait que l'image ait été chargée auparavant. La mise en cache n'a pas d'importance !
Mais les autres navigateurs se comportent différemment. Tant que l'image a été chargée auparavant et que le navigateur dispose d'un cache, complete sera vrai
Ceci est cohérent avec les performances de l'attribut readyState d'IE !
À ce stade, vous pouvez être sûr que tous les navigateurs mettent en cache les images ! Mais qu’est-ce qui cause exactement le problème ci-dessus ?
Comme nous le savons tous, le chargement des éléments depuis le cache est très rapide, alors copiez le code dans

Le code est le suivant suit :

Img.src = isrc;

Img.onload = ...


Est-il possible que IE et Opera se chargent si vite qu'il y a. n'est-il pas temps d'ajouter des événements ?

Cette fois, chargez une image inexistante pour voir l'effet :

Copiez le code Le code est tel suit :

Il est certain que tous les navigateurs ne déclenchent pas l'événement onload. Du point de vue de savoir si l'image est mise en cache ou chargée, IE et Opera se comportent normalement, complete est toujours faux
le readyState d'IE n'est toujours pas initialisé ; Ce qui est déroutant, c'est FF, où Imgttmt.complete est toujours vrai ; encore plus déroutant, c'est Chrom, où Imgttmt.complete est faux lors de l'appel initial de
new Imgttmt(). Après cela, la valeur de Imgttmt.complete sera toujours vraie ! Si vous passez à une image qui n'a jamais été chargée,

FF et Chrom se comportent de la même manière lors du chargement initial, la valeur Imgttmt.complete est fausse, puis elle est vraie !

Au cours du processus de test, nous avons également constaté que l'ordre d'exécution du script affectera effectivement l'ajout d'événements tels que onload. Si vous ajoutez des événements après leur affichage, cela n'aura aucune signification pratique !
Sur la base des caractéristiques de javascript, un langage interprétatif, lors de l'ajout d'un événement, vous devez faire attention à ajouter l'événement avant le handle qui déclenche l'événement.