Предварительная загрузка Массивы с использованием Javascript

Question

$(document).foundation(); 

var image_array = new Array(); 
var counter = 0; 
var changeBGImageInterval; 
var delay = 3000; //default 

$(document).ready(function(){ 
    console.log("Ready"); 

    $("#hashtagSearchForm").submit(function(event){ 
    var idelay = parseInt($("input[name=delaybox]").val()); 

    if(isNaN(idelay) === false){ 
     delay = idelay * 1000; // convert seconds to milliseconds (setInterval requirement) 
    }else{ 
     delay = 3000; // set to default if no input 
    } 

    console.log("Fetching images with #" + $("input[name=hashtagbox]").val()); 
    console.log("Delay: " + delay + " milliseconds"); 

    // AJAX part 
    $.post(
     "fetchInstagramImages.php", 
     { 
     'hashtag' : $("input[name=hashtagbox]").val() 
     }, 
     function(data){ 
     // This is triggered after the request has been completed. This is custom code. 
     // data = response data of request. In this case: echo json_decode($myArray); 

     var images = JSON.parse(data); 
     image_array = []; // clear array; 
     $(images).each(function(count){ 
      image_array.push(images[count]); 
     }); 

     // reset timed event first 
     clearInterval(changeBGImageInterval); 

     // for the timed event 
     changeBGImageInterval = setInterval(
      function(){ 
      $("body").css("background-image", 'url(' + image_array[counter] +')'); 
      // console.log(image_array[counter]); 
      counter++; 
      if(counter == 20){counter = 0;} 
      }, 
      delay // 3 seconds 
     ); 

     } 
    ); 
    event.preventDefault(); 
    }); 
}); 

Как я могу предварительно загрузить изображения из моего слайд-шоу с помощью JavaScript? Потому что не загружается быстро, и выглядит не очень хорошо. Любые предложения, как? Или есть кто-нибудь, кто мог бы это изменить? Благодарю. Как я могу предварительно загрузить изображения из своего слайд-шоу с помощью javascript? Потому что не загружается быстро, и выглядит не очень хорошо. Любые предложения, как? Или есть кто-нибудь, кто мог бы это изменить? Благодаря

Answer 1

Try поджимать изображения, как это:

$(function(){ 

     //let's preload some images 
     $.fn.preload = function() { 
     this.each(function(){ 
      $('<img/>')[0].src = this; 
     }); 
    } 

    $([ 
     '/assets/images/prices_img/289_on.gif', 
     '/assets/images/prices_img/389_on.gif', 
     '/assets/images/prices_img/489_on.gif', 
     '/assets/images/howitworks1.gif', 
     '/assets/images/howitworks2.gif', 
     '/assets/images/howitworks3.gif', 
     '/assets/images/not_signs.gif', 
     '/assets/images/socal_coverage.gif', 
     '/assets/images/property_info_steps/a_on.gif', 
     '/assets/images/property_info_steps/b_on.gif', 
     '/assets/images/property_info_steps/c_on.gif', 
     '/assets/images/property_info_steps/d_on.gif', 
     '/assets/images/property_info_steps/e_on.gif', 
     '/assets/images/property_info_steps/f_on.gif', 
     '/assets/images/property_info_steps/g_on.gif', 
     '/assets/images/property_info_steps/h_on.gif', 
     '/assets/images/property_info_steps/i_on.gif', 
     '/assets/images/property_info_steps/j_on.gif', 
     '/assets/images/browseimage.gif', 
     '/assets/images/ajax-loader.gif', 
     ]).preload(); 

}); 

Изменить массив для вас изображений соответственно. Удачи!

EDIT: Добавить следующее непосредственно перед clearInterval (changeBGImageInterval);

  //let's preload some images 
     $.fn.preload = function() { 
      this.each(function(){ 
       $('<img/>')[0].src = this; 
      }); 
     } 

     $(image_array).preload(); 

Таким образом, весь измененный код будет выглядеть следующим образом:

$(document).foundation();  

var image_array = new Array(); 
var counter = 0; 
var changeBGImageInterval; 
var delay = 3000; //default  

$(document).ready(function(){ 
    console.log("Ready");  

    $("#hashtagSearchForm").submit(function(event){ 
    var idelay = parseInt($("input[name=delaybox]").val());  

    if(isNaN(idelay) === false){ 
     delay = idelay * 1000; // convert seconds to milliseconds (setInterval requirement) 
    }else{ 
     delay = 3000; // set to default if no input 
    }  

    console.log("Fetching images with #" + $("input[name=hashtagbox]").val()); 
    console.log("Delay: " + delay + " milliseconds");  

    // AJAX part 
    $.post(
     "fetchInstagramImages.php", 
     { 
     'hashtag' : $("input[name=hashtagbox]").val() 
     }, 
     function(data){ 
     // This is triggered after the request has been completed. This is custom code. 
     // data = response data of request. In this case: echo json_decode($myArray);  

     var images = JSON.parse(data); 
     image_array = []; // clear array; 
     $(images).each(function(count){ 
      image_array.push(images[count]); 
     });  

     //let's preload some images 
     $.fn.preload = function() { 
      this.each(function(){ 
       $('<img/>')[0].src = this; 
      }); 
     } 

     $(image_array).preload(); 

     // reset timed event first 
     clearInterval(changeBGImageInterval);  

     // for the timed event 
     changeBGImageInterval = setInterval(
      function(){ 
      $("body").css("background-image", 'url(' + image_array[counter] +')'); 
      // console.log(image_array[counter]); 
      counter++; 
      if(counter == 20){counter = 0;} 
      }, 
      delay // 3 seconds 
     );  

     } 
    ); 
    event.preventDefault(); 
    }); 
});