Question

我有这个javascript代码。

<!-- //////////////////// IMAGE 1 //////////////////// -->
var i = 1;
var Imgt2e10 = Array.apply(null, new Array(10)).map(function() { 
  var img = new Image();
  img.src = "img/t2/t2e10/"+(i++)+".jpg"
  return img
});

function RollOvert2e10(i) { 
  document.t2e10.src=Imgt2e10[i].src; 
}

<!-- //////////////////// IMAGE 2 //////////////////// -->
var i = 1;
var Imgt2e2 = Array.apply(null, new Array(10)).map(function() { 
  var img = new Image();
  img.src = "img/t2/t2e2/"+(i++)+".jpg"
  return img
});

function RollOvert2e2(i) { 
  document.t2e2.src=Imgt2e2[i].src; 
}

<!-- //////////////////// IMAGE 3 //////////////////// -->
var i = 1;
var Imgt2e3 = Array.apply(null, new Array(10)).map(function() { 
  var img = new Image();
  img.src = "img/t2/t2e3/"+(i++)+".jpg"
  return img
});

function RollOvert2e3(i) { 
  document.t2e3.src=Imgt2e3[i].src; 
}

这些代码中的每一个都适用于一个图像。在这个例子中我有3张图片，但在我的网站上我有超过50张图片，加载网页的时间太长了。

是不是因为我一遍又一遍地重复代码，或者因为我有太多的图像（小jpg＆＃39; s）同时加载？

如何让这段代码更短更优雅？或者至少加载更快......

感谢任何帮助！

Answer 1

正如我们之前所讨论的，减速肯定是由图像的大小引起的。现在对于一些不那么繁琐的JS代码，我会提出类似的东西：

function Loader (basename)
{
    this.image = {};
    this.basename = basename;
}

Loader.prototype = {
    load: function (name)
    {
        this.image[name] = new array(10);
        for (var i = 0 ; i != 10 ; i++)
        {
            this.images[name][i] = new Image ();
            this.images[name][i].src = "img/"+basename+"/"+name+"/"+i+".jpg";
        }
    },

    rollover: function (name, index)
    {
        document[name].src = image[name][index].src;
    }
}


var loader = new Loader("t2"); // create a loader for the t2 folder

loader.load ("whatever"); // load an image collection
loader.rollover ("whatever", 5); // roll over to the 5th image

缓慢加载页面javascript

1 个答案: