(JavascriptJquery实现页面图片预加载百分比展现.docxVIP

Javascript，Jquery实现页面图片预加载百分比展现如果需要在页面初始加载时显示加载进度。主要是指图片很多的情况下：可以使用第三方Jquery插件jquery.imgpreload.min.js?调用里面的方法：imgpreload即可，实例如下：varimgNum = 0;var images = [];$(function(){ preloadImg(); });?//里面有两种方式functionpreLoadImg() {? ? //第一种方式：通过dom方法获取页面中的所有img，包括img标签和css中的background-image? ? /*get all imgs those tag is img? ? varimgs = document.images;? ? for (vari = 0; i imgs.length; i++) {? ? ? ? images.push(imgs[i].src);? ? }? ? //get all images in style? ? varcssImages = 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) ? 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(100sup%/sup);?? ? ? ? ? ? $(percentShow).fadeOut(1000);?? ??????? ?? ? ? ? ? ? $(.main).show();? ? ? ? }? ? });}?//get all images in style（此方法引用其他博客的）functiongetallBgimages() {? ? varurl, 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\([]?([^)]+)/.exec(url) || [];? ? ? ? url = url[1];? ? ? ? if (url B.indexOf(url) == -1) B[B.length] = url;? ? }? ? return