jquery melaksanakan preloading_jquery imej

Menggunakan jquery untuk melaksanakan pramuat imej meningkatkan kelajuan pemuatan halaman dan pengalaman pengguna Artikel ini akan memberikan anda analisis terperinci tentang prinsip pelaksanaan pramuat imej jquery.

Bila hendak menggunakan pramuat imej?

Jika halaman menggunakan banyak imej yang tidak kelihatan apabila dimuatkan pada mulanya, anda perlu pramuat:

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

Kami sering menghadapi masalah ini apabila membina tapak web: halaman mempunyai bilangan gambar yang banyak, yang menyebabkan halaman dimuatkan dengan perlahan dan halaman putih sering muncul, yang merupakan pengalaman pengguna yang sangat buruk. Jadi bagaimana untuk menyelesaikan masalah ini? Perkara pertama yang akan kami fikirkan adalah untuk meningkatkan prestasi pelayan dan menggunakan caching statik dan cara lain untuk mempercepatkan pemuatan imej Ini sememangnya kaedah yang baik, tetapi kadangkala kami juga boleh mencari beberapa penyelesaian dari meja depan. Seterusnya, saya akan memperkenalkan kaedah pramuat js yang sering digunakan dalam aplikasi praktikal.
Mula-mula, kami melakukan beberapa pemprosesan apabila mengeluarkan imej Selepas memproses html, kami mula menulis js. Di sini saya menggunakan perpustakaan kelas 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); 
  } 
}); 

Penjelasan dengan contoh: Javascript, Jquery merealisasikan paparan peratusan pramuat imej halaman

Jika anda perlu memaparkan kemajuan pemuatan apabila halaman dimuatkan pada mulanya. Terutamanya merujuk kepada kes di mana terdapat banyak gambar:

Anda boleh menggunakan pemalam Jquery pihak ketiga jquery.imgpreload.min.js
Panggil sahaja kaedah di dalam: imgpreload Contohnya adalah seperti berikut:

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

Ini akan memberikan pengguna peratusan gesaan apabila terdapat banyak gambar pada halaman dan kelajuan rangkaian sangat perlahan.
Sebelum melakukan ini, kerana setiap ujian tempatan dimuatkan dengan sangat cepat, peratusan serta-merta mencapai 100% dan kemudian hilang Untuk menjadikannya kelihatan seperti itu, saya juga menulis bar kemajuan pseudo-peratusan untuk rujukan sahaja:

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

Selepas permulaan halaman selesai, terdapat proses meningkatkan peratusan simulasi pada halaman Apabila ia mencapai 100%, bar kemajuan hilang dan halaman utama dipaparkan memuatkan halaman.

Di atas adalah kajian terperinci tentang pramuat imej jquery saya harap ia akan membantu pembelajaran semua orang.