Медленная загрузка страницы javascript

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) загрузки в одно и то же время?

Как я могу сделать этот код короче и изящным? Или, по крайней мере, загрузка быстрее ...

Любая помощь приветствуется!

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