使用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

尝试像这样预加载图片：

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