Partage de diverses méthodes d'implémentation de préchargement d'images js_compétences javascript

Il existe généralement plusieurs façons de précharger des images

1.balise html ou image de chargement CSS

Évidemment, nous pouvons précharger les images en utilisant la balise img ou via l'attribut background-image de la balise. Mais afin d'éviter de charger trop de photos pour la première fois et d'affecter l'expérience. Il est généralement préférable de charger le document une fois le document rendu (en utilisant window.onload, etc.).

2. Pure js pour implémenter le préchargement

Le Javascript du Empty City Plan-Code implémente le préchargement des images. L'exemple complet de préchargement est
.

function preloadimages(arr){  
  var newimages=[], loadedimages=0
  var postaction=function(){} //此处增加了一个postaction函数
  var arr=(typeof arr!="object")? [arr] : arr
  function imageloadpost(){
    loadedimages++
    if (loadedimages==arr.length){
      postaction(newimages) //加载完成用我们调用postaction函数并将newimages数组做为参数传递进去
    }
  }
  for (var i=0; i<arr.length; i++){
    newimages[i]=new Image()
    newimages[i].src=arr[i]
    newimages[i].onload=function(){
      imageloadpost()
    }
    newimages[i].onerror=function(){
      imageloadpost()
    }
  }
  return { //此处返回一个空白对象的done方法
    done:function(f){
      postaction=f || postaction
    }
  }
}

Le principe est de créer un objet Image dans une boucle, de définir le src de l'objet sur l'image spécifiée, puis de surveiller l'achèvement du chargement de l'image onload = function(){imageloadpost()} lorsque le chargement de l'image est terminé. , imageloadpost sera exécuté. Il s'avère qu'IE6 a toujours un problème : si l'image préchargée est déjà en mémoire, l'événement img.onload ne sera plus déclenché. Mais IE7+ n'a aucun problème. Il n'y a aucun problème avec les autres navigateurs, donc l'événement d'écoute img.onload ci-dessus n'a aucun problème de compatibilité.

3.Ajax implémente le préchargement

Les requêtes Ajax peuvent demander n'importe quelle donnée, et les images ne font pas exception. Jetons un coup d'œil au préchargement js/css

// XHR to request a JS and a CSS 
    var xhr = new XMLHttpRequest(); 
    xhr.open('GET', 'http://domain.tld/preload.js'); 
    xhr.send(''); 
    xhr = new XMLHttpRequest(); 
    xhr.open('GET', 'http://domain.tld/preload.css'); 
    xhr.send(''); 

Le préchargement ajax des images est en fait le même que le préchargement pur js des images

new Image().src = "http://domain.tld/preload.png"; 

C'est juste que l'explication ici est le chargement ajax. On peut comprendre que les nouvelles images sont toutes des requêtes get ajax.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde de comprendre le préchargement des images js.