Heim > Artikel > Web-Frontend > Beispielcodes für zwei Effekte des Ladens von js-Bildern

Beispielcodes für zwei Effekte des Ladens von js-Bildern

零下一度Original: 2017-05-15 09:47:281512Durchsuche

In diesem Artikel wird hauptsächlich der Beispielcode für den js Bild-Ladeeffekt (verzögertes Laden + Wasserfallladen) vorgestellt, der von großem praktischem Wert ist

Hauptsächlich zwei Bildladeeffekte ausführen

Einer besteht darin, eine Ladeaufforderung mit einem Leseeffekt bereitzustellen, wenn viele Bilder auf der Seite vorhanden sind (um das korrekte Laden zu überprüfen, dauert es 1 Sekunde). Stellen Sie das Ladeintervall auf 1 Stunde ein)

Die andere besteht darin, das Bild entsprechend der Position des Schiebereglers vorzuladen, um den Ladeeffekt des Wasserfallflusses zu erzielen, ohne dass der Benutzer es bemerkt

Lazy Loading

Hauptidee:

HTMLs img-Tag , speichern Sie die richtige Adresse im src-Attribut, legen Sie ein kreisförmiges Ladebild für alle Bilder als Hintergrund fest
js, lesen Sie jedes Bild nacheinander und ersetzen Sie die Adresse in src. Gehen Sie zu src und Hintergrund entfernen
Jedes Mal, wenn ein Bild erfolgreich geladen wurde, ändert sich der Prozentsatz des Fortschrittsbalkens entsprechend.
Wenn das Laden fehlschlägt, wird ein Bildladefehler angezeigt.

Die HTML-Struktur ist sehr einfach, das heißt, eine p.picList umschließt alle Bilder und fügt dann einen einfachen Fortschrittsbalken p#loadBar hinzu

<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 (Bei Verwendung von SCSS werden beim Kompilieren automatisch verschiedene kompatible Präfixe hinzugefügt.)

.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;
  }
}

In CSS sind zwei Dinge zu beachten:

Eines ist das Laden Das Bild Der während des Fehlers angezeigte graue Hintergrundtext wird in die Nach--Pseudoklasse von img eingefügt. Wenn das Laden des Bildes fehlschlägt und das Hintergrund-GIF-Bild entfernt wird, werden der Inhalt und der Stil dieses Teils angezeigt .
Einer ist der Stil des Fortschrittsbalkens. Die Schrift ist sehr einfach, hauptsächlich eine Schicht Grün mit Farbverlauf und eine Schicht Weiß übereinander. Grün bedeutet geladen, weiß bedeutet nicht geladen. Bei der Anzeige steuern Sie einfach direkt die Breite der weißen Ebene.

js-Teil (führen Sie einfach loadPicPerSecond() direkt aus)

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();
  }
}

Laden des zweiten Wasserfallflusses

Hauptidee:

Überwachen Sie das Scrollen des Fensters. Wenn das letzte geladene Bild im Fenster angezeigt wird, beginnen Sie mit dem Laden der folgenden Bilder.
Gehen Sie davon aus, dass alle Bildadressen bereits in json-Daten vorhanden sind, lesen Sie jedes Mal 10 Bildadressen, laden Sie sie und fügen Sie sie in das vorhandene Wasserfall-Flow-Ende ein.
Wiederholen, bis alle Bilder geladen sind.

HTML ist das gleiche wie im vorherigen Teil, schreiben Sie einfach src als normale Adresse. Das CSS ist genau das gleiche.

js-Teil

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);
  }

}

Was dringender ist, sind die Werte von scrollTop und height object. Ich kann mich immer nicht genau erinnern, also folge Die js und jquery sind alle aufgeschrieben und können in Zukunft direkt verwendet werden. Nachdem die numerische Beziehung herausgefunden wurde, kann die Belastung ausgelöst werden, solange die Bedingungen erfüllt sind.

【Verwandte Empfehlungen】

1. Besondere Empfehlung: „php Programmer Toolbox“ V0.1 Version herunterladen

2. Kostenloses js-Online-Video-Tutorial

3 php.cn Dugu Jiujian (3) – JavaScript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonBeispielcodes für zwei Effekte des Ladens von js-Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispiel-Tutorial zur Installation und Konfiguration von NodeJS und NPM unter Windows-VersionNächster Artikel：Beispiel-Tutorial zur Installation und Konfiguration von NodeJS und NPM unter Windows-Version

In Verbindung stehende Artikel

Mehr sehen