首页 > 代码库 > 使用JS,使得加载页面之前显示GIF图片

使用JS,使得加载页面之前显示GIF图片

下面是代码,这是伪加载提示条,跟加载速度无关

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title>    <style type="text/css">        .current a {            font-size: 20px;        }        .over {            display: block;            position: absolute;            top: 250px;            left: 0;            width: 100%;            height: 700px;            background-color: white;            opacity:0.5;            z-index: 1000;        }        .layout {            display: block;            position: absolute;            top: 20%;            left: 20%;            width: 20%;            height: 20%;            z-index: 1001;            text-align:center;        }    </style>    <script type="text/javascript">	setTimeout(showMain,"2700");        function showMain()        {            document.getElementById("over").style.display = "none";            document.getElementById("layout").style.display = "none";        }    </script></head><body>    <div class="current"><a href="http://www.mamicode.com/#" onclick="showMain()">Loading</a></div>    <div id="over" class="over"></div>    <div id="layout" class="layout"><img src="http://www.mamicode.com/loading.gif" /></div></body></html>

  

技术分享

下面是网上其他人的解决方法,可以真正实现显示加载的百分比

如果需要在页面初始加载时显示加载进度。主要是指图片很多的情况下:

可以使用第三方Jquery插件jquery.imgpreload.min.js
 
调用里面的方法:imgpreload即可,实例如下:
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‘) ? ‘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\([‘"]?([^")]+)/.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; }

  

 

使用JS,使得加载页面之前显示GIF图片