recherche

Maison >interface Web >js tutoriel >Exemples de codes pour deux effets de chargement d'image js

Exemples de codes pour deux effets de chargement d'image js

零下一度
零下一度original
2017-05-15 09:47:281608parcourir

Cet article présente principalement l'exemple de code d'effet de chargement jspicture (chargement différé + chargement en cascade), qui est d'une grande valeur pratique. Les amis qui en ont besoin peuvent s'y référer<.>

Effectuez principalement deux effets de chargement d'image


L'un consiste à fournir une invite de chargement avec un effet de lecture lorsqu'il y a de nombreuses images sur la page (afin de vérifier le chargement correct, 1 seconde est définir l'intervalle de chargement de 1 heure)


L'autre consiste à précharger l'image en fonction de la position du curseur, de manière à obtenir l'effet de chargement du flux de cascade sans que l'utilisateur ne s'en aperçoive

Chargement paresseux

Idée principale :

  1. La balise

    img de HTML , stockez l'adresse correcte dans l'attribut src, définissez une image de chargement en cercle pour toutes les images comme arrière-plan

  2. js, lisez chaque img tour à tour et remplacez l'adresse dans src Allez dans src et supprimer l'arrière-plan

  3. Chaque fois qu'une image est chargée avec succès, le pourcentage de la barre de progression change en conséquence.

  4. Si le chargement échoue, une erreur de chargement d'image s'affichera.

La structure HTML est très simple, c'est-à-dire qu'une p.picList enveloppe toutes les images, puis ajoute une simple barre de progression p#loadBar

<body>
  <p class="picList">
    <img class="lazy" src="pic/compressed/picList1.jg">
    <img class="lazy" src="pic/compressed/picList2.jpg">
    <img class="lazy" src="pic/compressed/picList3.jpg">
    <img class="lazy" src="pic/compressed/picList4.jpg">
    <img class="lazy" src="pic/compressed/picList5.jpg">
    <img class="lazy" src="pic/compressed/picList6.jpg">
    <img class="lazy" src="pic/compressed/picList7.jpg">
    <img class="lazy" src="pic/compressed/picList8.jpg">
    <img class="lazy" src="pic/compressed/picList9.jpg">
    <img class="lazy" src="pic/compressed/picList10.jpg">
  </p>

  <p id="loadBar">
    <p id="loadBarMask"></p>
  </p>
</body>
css (en utilisant scss, divers préfixes compatibles seront automatiquement ajoutés lors de la compilation) 

.picList{
  img{
    width: 100px;
    height: 100px;
    position: relative;

    /*加载失败时显示灰底文字*/
    &:after{
      content: "( ⊙ o ⊙ )加载失败";
      font-size: 6px;
      font-family: FontAwesome;
      color: rgb(100, 100, 100);
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: #ddd;
    }
  }
}

.lazy{
  background: url(../pic/loading.gif) center no-repeat;
  border: 1px solid black;
}

#loadBar{
  width: 200px;
  height: 15px;
  background: linear-gradient(90deg,#187103,#81b50b,#187103);
  border: 10px solid white;

  position: absolute;
  top: 150px;
  left: 50%;
  margin-left: -100px;

  #loadBarMask{
    width: 70%;//这个数值显示没有加载成功的图片
    height: 100%;
    background-color: beige;
    position: absolute;
    right: 0;
  }
}
Il y a deux choses à faire attention en CSS :

  1. La première est de charger l'image Le texte de fond gris affiché lors de l'erreur est placé dans la pseudo-classe after

    de img. Lorsque le chargement de l'image échoue et que l'image gif d'arrière-plan est supprimée, le contenu et le style de cette partie seront affichés. .

  2. L'un est le style de la barre de progression. L'écriture est très simple, principalement une couche de vert avec dégradé et une couche de blanc empilées ensemble. Le vert signifie chargé, le blanc signifie non chargé. Lors de l'affichage, contrôlez simplement la largeur du calque blanc directement.

partie js (exécutez simplement loadPicPerSecond() directement) 

var lazyPic = $(&#39;img.lazy&#39;);
var loadBarMask = $(&#39;#loadBarMask&#39;);
var picList = $(&#39;.picList&#39;);

var activePic = 0;
var totalPic = lazyPic.length;

/*每秒加载一张图片*/

function loadPicPerSecond(){

  lazyPic.each(function(index){

    var self = $(this);

    //console.log(self[0].complete);
    /*img标签已经事先写在html中，所以此时的complete状态全部都是true*/

    setTimeout(function(){

      src[index] = self.attr(&#39;src&#39;);
      self.attr(&#39;src&#39;,src[index]);
      self.removeClass(&#39;lazy&#39;);

      //图片获得正确src地址之后，可以执行下面的onload操作
      self[0].onload = function(){

        //加载读条loadBar动画
        countPic();
      }

      //图片获得的src地址不正确时，执行下面的onerror操作
      self[0].onerror = function(){
        /*this.style.background = &#39;url(pic/compressed/picList18.jpg) center no-repeat&#39;;*/
        countPic();
      }

    },1000*index);

  })

}

/*根据onload的执行情况来计算当前的图片加载进度.每onload一次，activePic就增加1*/

function countPic(){

  activePic++;

  var leftPic = totalPic - activePic;
  var percentPic = Math.ceil(leftPic/totalPic*100);//没有加载的图片百分比，和loadBarMask的宽度占比配合

  console.log("已加载"+(100-percentPic)+"%");

  loadBarMask.css("width",percentPic+"%");

  if(percentPic==0){
    $(&#39;#loadBar&#39;).hide();
  }
}

Chargement du deuxième flux en cascade

Idée principale :

  1. Surveillez le défilement de la fenêtre, et lorsque la dernière image chargée est sur le point d'entrer dans la fenêtre, commencez à charger les images suivantes.

  2. Supposons que toutes les adresses d'image existent déjà dans des données

    json, lisez 10 adresses d'image à chaque fois, chargez-les et insérez-les dans l'extrémité du flux de cascade existante.

  3. Répétez jusqu'à ce que toutes les images soient chargées.

Le HTML est le même que la partie précédente, écrivez simplement src comme adresse normale. Le CSS est exactement le même.

partie js

var lazyPic = $(&#39;img.lazy&#39;);
var loadBarMask = $(&#39;#loadBarMask&#39;);
var picList = $(&#39;.picList&#39;);

var scrollTop,
  clientHeight,
  scrollHeight;

var threshold = 200; //最后一张图片距离窗口200px的时候开始加载图片

var src = [];

var activePic = 0;
var totalPic = lazyPic.length;

//待加载的图片数据
var dirtSrc = "pic/compressed/picList";
var picData = {imgSrc:[
  dirtSrc + "20.jpg",
  dirtSrc + "21.jpg",
  dirtSrc + "22.jpg",
  dirtSrc + "23.jpg",
  dirtSrc + "24.jpg",
  dirtSrc + "25.jpg",
  dirtSrc + "26.jpg",
  dirtSrc + "27.jpg",
  dirtSrc + "28.jpg",
  dirtSrc + "29.jpg",
  dirtSrc + "30.jpg",
  dirtSrc + "31.jpg",
  dirtSrc + "32.jpg",
  dirtSrc + "33.jpg",
  dirtSrc + "34.jpg",
  dirtSrc + "35.jpg",
  dirtSrc + "36.jpg",
  dirtSrc + "37.jpg",
  dirtSrc + "38.jpg",
  dirtSrc + "39.jpg",
  dirtSrc + "40.jpg",
  dirtSrc + "41.jpg",
  dirtSrc + "42.jpg",
  dirtSrc + "43.jpg",
  dirtSrc + "44.jpg",
  dirtSrc + "45.jpg",
  dirtSrc + "46.jpg",
  dirtSrc + "47.jpg",
  dirtSrc + "48.jpg",
  dirtSrc + "49.jpg",
]};

//加载次数计数器
var scrollIndex = 0;

$(function(){

  /*监听窗口滚动情况*/
  $(window).on(&#39;scroll&#39;,function(){

    scrollTop = $(window).scrollTop();//$(window).scrollTop()==document.body.scrollTop
    clientHeight = $(window).height();
    scrollHeight = picList.last().height();//picList.last()[0].clientHeight

    /*目标与窗口的距离达到阈值时开始加载*/
    if(scrollHeight-clientHeight-scrollTop < threshold){
      scrollPic(10);
    }
  })
})

/*根据滚动程度加载图片，每次加载perAmount张*/

function scrollPic(perAmount = 10){

  var totalAmount = perAmount * (scrollIndex+1);

   //考虑到最后一次加载的时候，剩余的图片数量有可能达不到限定的每次加载的数量，这时候需要更改totalAmount的值
  if(totalAmount>picData.imgSrc.length){
    totalAmount = picData.imgSrc.length;
  }
  for(scrollIndex;scrollIndex<totalAmount;scrollIndex++){
    var oimg = new Image();
    oimg.src = picData.imgSrc[scrollIndex];
    picList.append(oimg);
  }

}
Ce qui est plus urgent, ce sont les valeurs​​de scrollTop et height

object dont je ne m'en souviens toujours pas clairement, alors je. suivez les js et jquery sont tous écrits et peuvent être utilisés directement à l'avenir. Après avoir déterminé la relation numérique, le chargement peut être déclenché tant que les conditions sont remplies.

【Recommandations associées】


1.

Recommandation spéciale : "php Programmer Toolbox" version V0.1 Télécharger

2.

Tutoriel vidéo en ligne js gratuit

3. php.cn Dugu Jiujian (3) - Tutoriel vidéo JavaScript

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Exemple de tutoriel d'installation et de configuration de NodeJS et NPM sous version WindowsArticle suivant：Exemple de tutoriel d'installation et de configuration de NodeJS et NPM sous version Windows

Articles Liés

Voir plus