写一个网页进度loading(一)

来源:互联网 发布:ubuntu root权限命令 编辑:程序博客网 时间:2024/05/17 13:42

图片预加载

主要是列出项目中要加载的主要图片,并写在预加载函数中。

var picPrefix = "images/";//图片所在的文件夹var preloadPics = ["img1.png", "img2.png", "img3.png"];//需要加载的图片$(function(){    loadingImg(preloadPics, callback);//运行图片预加载函数});//图片预加载函数function loadingImg(pic, callback){    var len = pic.length;    var index = 0;    var img = new Image();    var loading = function(){        img.src = picPrefix + pic[index];        img.onload = function(){            var pro = Math.floor(((index+1)/len)*100)+'%';            $(".procedure").text(pro);//显示加载进度            $(".loadProColor").css({width:pro});//显示进度条            index++;            if(index < len){            loading();            }else{                $(".procedure").text(100 + '%');                callback();            }        }    };    loading();}//结束加载执行函数function endLoading(){    setTimeOut(function(){        $(".loadPage").fadeOut();//隐藏加载页        $(".indexPage").fadeIn();//显示正文页    },500);}
原创粉丝点击