Javascript 用于加载图像的预加载程序

我目前正在制作SVG SMIL动画，其中我使用了一些.png和.gif文件来简化IE中的动画。对于这个动画，我试图在加载动画及其其他内容之前获取预加载程序

问题是我没有得到预加载正常工作。My.html页面首先被加载，然后预加载程序开始。。。在Preload中，我也使用了一些web上可用的预加载程序。但是它们对我没有帮助

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

这是我在网上找到的preload.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();
    })
}

$（文档）.ready（函数（）{
“严格使用”
//支持IE8及以下版本的索引。
if（！Array.prototype.indexOf）{
Array.prototype.indexOf=函数（elt/*，from*/）{
var len=this.length>>>0；
var from=Number（参数[1]）| | 0；
from=（from<0）
？数学单元（来自）
：数学。地板（从）；
如果（从<0开始）
from+=len；
for（；from

---

})

我使用它为动画预加载图像。 您可以根据需要添加和删除加载的数量

<script language="javascript">function preloader() {
    if (document.images) {
        var img1 = new Image();
        var img2 = new Image();
        var img3 = new Image();
        var img4 = new Image();
        var img5 = new Image();
        var img6 = new Image();
        var img7 = new Image();
        var img8 = new Image();
        var img9 = new Image();

        img1.src = "image link here";
        img2.src = "image link here";
        img3.src = "image link here";
        img4.src = "image link here";
        img5.src = "image link here";
        img6.src = "image link here";
        img7.src = "image link here";
        img8.src = "image link here";
        img9.src = "image link here";
    }
}
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}
addLoadEvent(preloader);</script>

函数预加载程序（）{
if（document.images）{
var img1=新图像（）；
var img2=新图像（）；
var img3=新图像（）；
var img4=新图像（）；
var img5=新图像（）；
var img6=新图像（）；
var img7=新图像（）；
var img8=新图像（）；
var img9=新图像（）；
img1.src=“此处的图像链接”；
img2.src=“此处的图像链接”；
img3.src=“此处的图像链接”；
img4.src=“此处的图像链接”；
img5.src=“此处图像链接”；
img6.src=“此处的图像链接”；
img7.src=“此处的图像链接”；
img8.src=“此处图像链接”；
img9.src=“此处的图像链接”；
}
}
函数addLoadEvent（func）{
var oldonload=window.onload；
if（typeof window.onload！=“函数”）{
window.onload=func；
}否则{
window.onload=函数（）{
if（oldonload）{
oldonload（）；
}
func（）；
}
}
}
addLoadEvent（预加载程序）；

在开始执行js代码之前，我要做的一个小技巧是，创建一个display:none的div，并用需要加载的所有标记填充它

<body>

    <span id="loadingText">Loading...</span>

    <div style="display:none">
        <img src="pathtoimage1">
        <img src="pathtoimage2">
        <img src="pathtoimage3">
    </div>

    <script>
        window.onload = function(){
           //This gets called when all the items in that div has been loaded and cached.
           document.getElementById("loadingText").style.display = "none";
        }
    </script>

</body>

加载。。。
window.onload=函数（）{
//当该div中的所有项都已加载并缓存时，将调用该函数。
document.getElementById（“loadingText”）.style.display=“无”；
}

您是否尝试过任何代码，如果是，请分享。我使用了Preload.js，这是我在web上找到的。我正在用javascriptproblem更新我的代码。svg标记的源代码由“xlink:href”而不是“src”给出。在这个示例中，当我尝试绑定“xlink:href”时，它会直接指向错误函数，这还不错，但我的代码允许页面加载同时，页面加载几乎没有延迟，因为css首先加载。