用于加载图像的预加载器

我目前正在制作SVG SMIL动画，其中我使用一些。png和。gif文件来缓解IE中的动画。对于这个动画，我试图在动画和它的其他内容被加载之前获得Preloader。

问题是我没有得到预加载程序正常工作。我的。html页面首先被加载，然后preloader开始…在Preloader中，我也使用了网络上可用的几个预加载器。但是它们对我没有帮助。

脚本和。html文件的加载时间可以通过domContentLoaded计算，但对于图像。我不知道该怎么做。如果有人能给我一个建议，那就太好了。

这是preloader.js的代码，我在网上找到的:

$(document).ready(function () {
"use strict"
//indexOf support for IE8 and below. 
if (!Array.prototype.indexOf){
  Array.prototype.indexOf = function(elt /*, from*/){
    var len = this.length >>> 0;
    var from = Number(arguments[1]) || 0;
    from = (from < 0)
         ? Math.ceil(from)
         : Math.floor(from);
    if (from < 0)
      from += len;
    for (; from < len; from++){
      if (from in this &&
          this[from] === elt)
        return from;
    }
    return -1;
  };
}
//bgImg for holding background images in the page & img array for images present in the document(<img src="">).
var bgImg = [], img = [], count=0, percentage = 0;
//Creating loader holder. 
$('<div id="loaderMask"><span>0%</span></div>').css({
    position:"fixed",
    top:0,
    bottom:0,
    left:0,
    right:0,
    background:'#fff'
}).appendTo('body');
//Using jQuery filter method we parse all elemnts in the page and adds background image url & images src into respective arrays.
$('*').filter(function() {
    var val = $(this).css('background-image').replace(/url'(/g,'').replace(/')/,'').replace(/"/g,'');
    var imgVal = $(this).not('image').attr('xlink:href');
    //Getting urls of background images.
    if(val !== 'none' && !/linear-gradient/g.test(val) && bgImg.indexOf(val) === -1){
        bgImg.push(val)
    }
    //Getting src of images in the document.
    if(imgVal !== undefined && img.indexOf(imgVal) === -1){
        img.push(imgVal)
    }
});
//Merging both bg image array & img src array
var imgArray = bgImg.concat(img); 
console.log(imgArray.length);
//Adding events for all the images in the array.
$.each(imgArray, function(i,val){ 
    //Attaching load event 
    $("<image />").attr("xlink:href", val).bind("load", function () {
        console.log('val'+val);
        completeImageLoading();
    });
    //Attaching error event
    $("<image />").attr("xlink:href", val).bind("error", function () {
        imgError(this);
    });
})
//After each successful image load we will create percentage.
function completeImageLoading(){
    count++;
    percentage = Math.floor(count / imgArray.length * 100);
    console.log('percentage:'+percentage);
    $('#loaderMask').html('<span>'+percentage + '%'+'</span>');
    //When percentage is 100 we will remove loader and display page.
    if(percentage == 100){
        $('#loaderMask').html('<span>100%</span>')
        $('#loaderMask').fadeOut(function(){
            $('#loaderMask').remove()
        })
    }
}
//Error handling - When image fails to load we will remove the mask & shows the page. 
function imgError (arg) {
    $('#loaderMask').html("Image failed to load.. Loader quitting..").delay(3000).fadeOut(1000, function(){
        $('#loaderMask').remove();
    })
}

});