我是否需要在 jQuery 幻灯片中预加载我的放大图像，如果需要，我如何在数组中抓取它们以进行预加载答案

【问题标题】：Do I need to pre-load my blow-up images in a jQuery slideshow, and, if so, how can I grab them in an array for pre-loading我是否需要在 jQuery 幻灯片中预加载我的放大图像，如果需要，我如何在数组中抓取它们以进行预加载
【发布时间】：2011-07-27 18:47:26
【问题描述】：

我的幻灯片如下所示：https://img.skitch.com/20110727-gea94py8hbfse2fxhmbg3k7crc.jpg

所以我的挑战是弄清楚如何在页面上不存在放大或“主”图像时预加载它。我正在做一些 URL 技巧来获取使用不同 Drupal 图像样式（图像缓存预设）的主图像的路径，因此存在于具有相同文件名的不同文件夹中。

    //When a user clicks on a thumbnail this script will change the src of a target image
    //Declare the image style we'll be using for the large image.
    var imageStyle = 'slide_large';

    //Preload the large images 
    //Takes an array of images
    /*
    (function($) {
      var cache = [];
      // Arguments are image paths relative to the current page.
      $.preLoadImages = function() {
        var args_len = arguments.length;
        for (var i = args_len; i--;) {
          var cacheImage = document.createElement('img');
          cacheImage.src = arguments[i];
          cache.push(cacheImage);
        }
      }
    })(jQuery)
    */

    //We'll need a function to grab the image name out of the image path
    function getImageName(mySRC) {
      var index = mySRC.lastIndexOf("/");
      var fileName = mySRC.substr(index+1);
      return fileName;
    };

    //Would be nice to grab the first thumbnail in the slider and make this the first image.


    //We'll want to swap out the main image when a user clicks on a thumb from the slider with the desired image.
    (function ($) {
      $(document).ready(function(){
        //$.preLoadImages("/path/to/image1.gif", "/path/to/image2.png");
        $(".jcarousel .field-content img").bind("click", function(){

            var imageName = getImageName(this.src);
            var imagePath = '/sites/default/files/styles/' + imageStyle + '/public/slides/' + imageName;

            $("#block-block-2 img").attr('src', imagePath);   
        });
      });
    })(jQuery);

这可能是一个简单的问题，将拇指和主图像加载到数组中，然后将它们提交到我在 Stack Overflow 上找到的预加载函数中。所以……

我需要预加载吗？
如何将所有内容放入数组中以提交给我的预加载函数。

【问题讨论】：

标签： jquery drupal-7

【解决方案1】：

而不是预加载，这看起来很复杂，因为它需要将所有这些放大的图像放在一个隐藏的 div 中。我去了http://www.ajaxload.info/ 并下载了一个 throbber，我将用作主图像槽的背景图像，所以如果加载图像有延迟，这对用户来说是有意义的。

【讨论】：