jquery implémente l'image preloading_jquery

L'utilisation de jquery pour implémenter le préchargement d'images améliore la vitesse de chargement des pages et l'expérience utilisateur. Cet article vous fournira une analyse détaillée du principe d'implémentation du préchargement d'images jquery.

Quand utiliser le préchargement d'images ?

Si la page utilise beaucoup d'images qui ne sont pas visibles au chargement initial, il est nécessaire de précharger :

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

Nous rencontrons souvent ce problème lors de la création de sites Web : une page contient un grand nombre d'images, ce qui ralentit le chargement de la page, et une page blanche apparaît souvent, ce qui est une très mauvaise expérience utilisateur. Alors comment résoudre ce problème ? La première chose à laquelle nous penserons est d'améliorer les performances du serveur et d'utiliser la mise en cache statique et d'autres moyens pour accélérer le chargement des images. C'est en effet une bonne méthode, mais parfois nous pouvons aussi trouver des solutions auprès de la réception. Ensuite, je présenterai une méthode de préchargement js qui est souvent utilisée dans les applications pratiques.
Tout d'abord, nous effectuons un traitement lors de la sortie de l'imagea8ec0dad7a8882978e5501a84227c18c Après avoir traité le code HTML, nous avons commencé à écrire js. Ici, j'ai utilisé la bibliothèque de classes jquery. 

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

Explication avec exemples : Javascript, Jquery réalise l'affichage du pourcentage de préchargement de l'image de la page

Si vous devez afficher la progression du chargement lors du chargement initial de la page. Fait principalement référence au cas où il y a de nombreuses images :

Vous pouvez utiliser le plug-in Jquery tiers jquery.imgpreload.min.js
Appelez simplement la méthode à l'intérieur : imgpreload. L'exemple est le suivant :
.

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

Cela donnera à l'utilisateur une invite de pourcentage lorsqu'il y a beaucoup d'images sur la page et que la vitesse du réseau est très lente.
Avant de faire cela, comme chaque test local se charge très rapidement, le pourcentage atteint instantanément 100 % puis disparaît. Pour que cela ressemble à ça, j'ai également écrit une barre de progression pseudo-pourcentage à titre de référence uniquement :
.

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

Une fois l'initialisation de la page terminée, il y a un processus d'augmentation du pourcentage simulé sur la page. Lorsqu'il atteint 100 %, la barre de progression disparaît et la page principale s'affiche. Cependant, cela n'a rien à voir avec la page réelle. chargement des pages.

Ce qui précède est une étude détaillée sur le préchargement d'images jquery. J'espère que cela sera utile à l'apprentissage de chacun.