javascript - 使用 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();
  });
});

How can I preload images from my slideshow using javascript? Because doesn't load fast and it doesn't look good. Any suggestions how to? Or is there anyone who could edit this? Thanks. How can I preload images from my slideshow using javascript? Because doesn't load fast and it doesn't look good. Any suggestions how to? Or is there anyone who could edit this? Thanks

Answer 1

尝试像这样预加载图像:

$(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();

});

相应地修改图像的数组。祝你好运!

编辑:在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();
   });
 });