JQuery - преднатяг изображение, основанный на классе якорной

Question

Так у меня есть следующий HTML:

<ul id="nav"> 
    <li><a href="somepage1.php" class="class1">Link1</a></li> 
    <li><a href="somepage2.php" class="class2">Link2</a></li> 
</ul> 

Jquery функция:

(function($) { 
    var imgList = []; 
    $.extend({ 
     preload: function(imgArr, option) { 
      var setting = $.extend({ 
       init: function(loaded, total) {}, 
       loaded: function(img, loaded, total) {}, 
       loaded_all: function(loaded, total) {} 
      }, option); 
      var total = imgArr.length; 
      var loaded = 0; 

      setting.init(0, total); 
      for(var i in imgArr) { 
       imgList.push($("<img />") 
        .attr("src", imgArr[i]) 
        .load(function() { 
         loaded++; 
         setting.loaded(this, loaded, total); 
         if(loaded == total) { 
          setting.loaded_all(loaded, total); 
         } 
        }) 
       ); 
      } 

     } 
    }); 
})(jQuery); 

и документ, готовый триггер (упрощенный):

$.preload([ 
    'path/to/image.jpg', 
    'path/to/image2.jpg', 
    'path/to/image3.jpg', 
    'path/to/image4.jpg', 
]); 

Он работает очень хорошо, но мне нужно его улучшить. Когда пользователь нажимает на якорь с классом 'class1', preloader должен читать изображения, которые назначаются определенному массиву. И мне нужно будет писать '$ .preload' только один раз.

Так что моя идея состояла в том, чтобы создать два различных массив, как:

var arraysClass1 = [ 
    'path/to/image.jpg', 
    'path/to/image2.jpg', 
    'path/to/image3.jpg', 
    'path/to/image4.jpg' 
]; 

var arraysClass2 = [ 
    'path/to/image5.jpg', 
    'path/to/image6.jpg', 
    'path/to/image7.jpg', 
    'path/to/image8.jpg' 
]; 

затем создать документ, готовое событие как сильфон. Im застрял здесь и код пыльник имеют ошибки

$('#nav a').live("click", (function(event){ 
    event.preventDefault(); 
    var getClass = '.'+$(this).attr("class"); 
    $(function() { 
     $.preload([ 
      if(getClass=='.class1'){ 
       arrayClass1; 
      } 
      elseif(getClass=='.class2'){ 
       arrayClass2; 
      } 

     ]); 
    }); 

Я не знаю, как создать 'IF' логика в $ .preload ([...]);

Answer 1

Вот блок кода, который будет делать то, что вы ищете:

$('#nav a').live("click", function(event){ 
    event.preventDefault(); 
    usearr=''; 
    if ($(this).attr("class")=="class1") { 
     usearr=arraysClass1; 
    } else if ($(this).attr("class")=="class2") { 
     usearr=arraysClass2; 
    } 
    $.preload(usearr); 
}); 

Answer 2

Почему вы не нашли подходящий объект вне $ .preload ([]), как показано ниже.

$('#nav a').live("click", (function(event){ 
    event.preventDefault(); 
    var getClass = '.'+$(this).attr("class"); 
    var targetObj ; 
    if(getClass=='.class1'){ 
       targetObj = arrayClass1; 
    } 
    else if(getClass=='.class2'){ 
       targetObj = arrayClass2; 
    } 
     $.preload(targetObj); 
}); 

и вам не нужен другой $(function()) внутри мыши обратного вызова.