jquery implementiert das Bild preloading_jquery

Die Verwendung von JQuery zum Implementieren des Vorladens von Bildern verbessert die Geschwindigkeit beim Laden von Seiten und das Benutzererlebnis. In diesem Artikel finden Sie eine detaillierte Analyse des Implementierungsprinzips des Vorladens von Bildern mit JQuery.

Wann sollte das Vorladen von Bildern verwendet werden?

Wenn die Seite viele Bilder verwendet, die beim ersten Laden nicht sichtbar sind, muss Folgendes vorab geladen werden:

$.preloadImages = function () {
 for (var i = 0; i < arguments.length; i++) {
 $('img').attr('src', arguments[i]);
 }
};
$.preloadImages('img/hover-on.png', 'img/hover-off.png');

Beim Erstellen von Websites stoßen wir häufig auf dieses Problem: Eine Seite enthält eine große Anzahl von Bildern, was dazu führt, dass die Seite langsam geladen wird, und häufig wird eine weiße Seite angezeigt, was eine sehr schlechte Benutzererfahrung darstellt. Wie kann man dieses Problem lösen? Das erste, woran wir denken werden, ist, die Serverleistung zu verbessern und statisches Caching und andere Mittel zu verwenden, um das Laden von Bildern zu beschleunigen. Dies ist in der Tat eine gute Methode, aber manchmal können wir auch einige Lösungen an der Rezeption finden. Als Nächstes werde ich eine Methode zum Vorladen von js vorstellen, die häufig in praktischen Anwendungen verwendet wird.
Zuerst führen wir bei der Ausgabe des Bildes eine Verarbeitung durch.5672c2ec260a70c2e52c9167bb00ef87 Nach der Verarbeitung des HTML begannen wir mit dem Schreiben von js. Hier habe ich die jquery-Klassenbibliothek verwendet. 

$('img[data]').load(function(){ 
 var __this__ = $(this); 
 var url = __this__.attr('data'); 
 var src = __this__.attr('src'); 
 if(url ==''|| url == src)//这里判断如果图片实际地址不存在或者已经加载不处理 
 { 
  return; 
 } 
 var img =newImage();//实例化一个图片的对象 
 img.src = url;//将要显示的图片加载进来 
  if(img.complete)//如果图片已经加载存在浏览器缓存中直接处理 
  { 
  __this__.attr('src',url);//将要显示的图片替换过来 
  return; 
  } 
  img.onload =function(){//要显示的图片加载完成后做处理 
  __this__.attr('src',url); 
  } 
}); 

Erklärung mit Beispielen: Javascript, Jquery realisiert die prozentuale Anzeige des Seitenbild-Vorladens

Wenn Sie den Ladefortschritt beim ersten Laden der Seite anzeigen müssen. Bezieht sich hauptsächlich auf den Fall, dass viele Bilder vorhanden sind:

Sie können das Jquery-Plug-in jquery.imgpreload.min.js eines Drittanbieters
verwenden Rufen Sie einfach die Methode im Inneren auf: imgpreload. Das Beispiel lautet wie folgt:

var imgNum = 0;
var images = [];
$(function(){ preloadImg(); });
 
//里面有两种方式
function preLoadImg() {
 //第一种方式：通过dom方法获取页面中的所有img，包括<img>标签和css中的background-image
 /*get all imgs those tag is <img>
 var imgs = document.images;
 for (var i = 0; i < imgs.length; i++) {
  images.push(imgs[i].src);
 }
 //get all images in style
 var cssImages = getallBgimages();
 for (var j = 0; j < cssImages.length; j++) {
  images.push(cssImages[j]);
 }*/
 
 //第二种方式：把所有该网页上用到的图片文件都预先放入一个数组里 
 $.imgpreload(['images/bg1.jpg', 'images/bg2.jpg'], function () {
   //此处是显示进度百分比时需要用到的背景图，这个可以先加载进去
 });
 
 //then push all other images in array to load 
 images.push("images/test_1.png");
 images.push("images/test_2.png");
 images.push("images/test_3.png");
 //。。。
 images.push("images/test_n.png"); 
 
 /*这里是真正的图片预加载 preload*/
 $.imgpreload(images,
 {
  each: function () {
   /*this will be called after each image loaded*/
   var status = $(this).data('loaded') &#63; 'success' : 'error';
   if (status == "success") {    
    var v = (parseFloat(++imgNum) / images.length).toFixed(2);
    $("#percentShow").html(Math.round(v * 100) + "<sup>%</sup>");    
   }
  },
  all: function () {
   /*this will be called after all images loaded*/
   $("#percentShow ").html("100<sup>%</sup>");
 
   $("percentShow").fadeOut(1000);   
   $(".main").show();
  }
 });
}
 
//get all images in style（此方法引用其他博客的）
function getallBgimages() {
 var url, B = [], A = document.getElementsByTagName('*');
 A = B.slice.call(A, 0, A.length);
 while (A.length) {
  url = document.deepCss(A.shift(), 'background-image');
  if (url) url = /url\(['"]&#63;([^")]+)/.exec(url) || [];
  url = url[1];
  if (url && B.indexOf(url) == -1) B[B.length] = url;
 }
 return B;
}
 
document.deepCss = function (who, css) {
 if (!who || !who.style) return '';
 var sty = css.replace(/\-([a-z])/g, function (a, b) {
  return b.toUpperCase();
 });
 if (who.currentStyle) {
  return who.style[sty] || who.currentStyle[sty] || '';
 }
 var dv = document.defaultView || window;
 return who.style[sty] ||
 dv.getComputedStyle(who, "").getPropertyValue(css) || '';
}
 
Array.prototype.indexOf = Array.prototype.indexOf ||
 function (what, index) {
  index = index || 0;
  var L = this.length;
  while (index < L) {
   if (this[index] === what) return index;
   ++index;
  }
  return -1;
 }

Dadurch wird dem Benutzer eine Prozentangabe angezeigt, wenn viele Bilder auf der Seite vorhanden sind und die Netzwerkgeschwindigkeit sehr langsam ist.
Da jeder lokale Test sehr schnell geladen wird, erreicht der Prozentsatz vorher sofort 100 % und verschwindet dann. Damit es so aussieht, habe ich nur als Referenz einen Pseudo-Prozent-Fortschrittsbalken geschrieben:

 var t = window.setTimeout("preLoad()", 100);
 function preLoad() {
  $("#loading div").animate({ width: step + "px" }, 50).text(step + "%");
  step += 1;
  if (step <= 100) {
   t = window.setTimeout("preLoad()", 100);
  } else {
   clearTimeout(t);
   $("#loading").fadeOut(1000);
   $("#preloadImg").fadeOut(1000);
   
   $(".main").show();
 }

Nachdem die Seiteninitialisierung abgeschlossen ist, wird der simulierte Prozentsatz auf der Seite erhöht. Wenn er 100 % erreicht, verschwindet der Fortschrittsbalken und die Hauptseite wird angezeigt. Dies hat jedoch nichts mit der tatsächlichen zu tun Laden der Seite.

Das Obige ist eine detaillierte Studie zum Vorladen von JQuery-Bildern. Ich hoffe, dass es für das Lernen aller hilfreich sein wird.