Déterminer l'état de chargement de l'image et obtenir un chargement d'effet en pourcentage

Avant-propos

Certaines ressources externes volumineuses entraîneront un chargement lent de la page. À ce stade, l'effet de chargement est généralement ajouté ; ce qui est implémenté ici est l'effet de chargement basé sur le pourcentage de progression du chargement de l'image.

Que diriez-vous de déterminer l'état du chargement de l'image

1. onload onerror

Il est recommandé d'utiliser cette méthode une fois l'image chargée avec succès, l'événement onload sera. déclenché. Même s'il y a un cache, tant que l'adresse de l'image est demandée à nouveau, elle sera déclenchée par l'événement de chargement ; l'échec du chargement de l'image déclenchera l'événement d'erreur. Cette méthode a une bonne compatibilité et est recommandée

2. imgObj.onreadystatechange

Certains navigateurs prennent en charge cette méthode Selon readState === 'complete', vous pouvez déterminer si l'image est chargée.

Testé :

Chrome et Firefox ne déclencheront pas cet événement

La version IE Edge ne déclenchera pas cet événement

IE 10 9 déclenchera cet événement Événement ; les versions inférieures n'ont pas été testées

, il n'est donc pas recommandé d'utiliser

3. imgObj.complete

L'attribut complete peut déterminer si l'image est chargée. Cependant, différents navigateurs gèrent complete de manière incohérente :

Si la ressource image est normale, l'image est chargée avec succès. Tous les navigateurs passent de false à true

Mais si la ressource image est anormale, l'image Chrome et Firefox passent de false à true après l'échec du chargement ; mais IE sera toujours false

, cette méthode n'est donc pas recommandée.

Progression du chargement des ressources image

Vous pouvez juger si une seule ressource image a été chargée, et il est facile de calculer la progression du chargement de toutes les ressources image sur la page entière.

document.addEventListener('DOMContentLoaded', function(){
      var imgs = document.querySelectorAll('img'), //所有图片资源
          show = 0, //百分比
          num = 0; //加载完成的个数
      var all = imgs.length;
      [].slice.call(imgs).forEach(function(element,index){
         //不管是否加载成功，都num+1
        element.addEventListener('load',function(){
          num++;
          show = Math.floor(100*num/all);

        })

        element.addEventListener('error',function(){
          num++;
          show = Math.floor(100*num/all);
        })
      })
    })

Avec l'ajout de mots de masque et de pourcentage, il est facile d'obtenir l'effet de pourcentage de chargement.

Une fois la page entièrement chargée , masquez le masque pour obtenir un effet de chargement plus convivial

    window.onload = function(){
      document.querySelector('.mask').classList.add('hide');
    }

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!