jquery如何在扩展器函数中预加载然后交换图像？

Question

我正在使用 Expander.js 一个用于扩展文本的 jquery 插件。

现在事情是这样的，

每当触发展开和折叠时我都应该交换图像。

现在通常这不是问题。

还有一条信息是，有一个项目列表，其中包含可扩展的描述和图像，因此代码内有 id。

编辑：现在将显示完整的代码。

代码如下：

   $(document).ready(function() {

  // override some default options
  $('div.expandable div').expander({
    slicePoint:       200,  // default is 100
    expandText:         'Expand', // default is 'read more...'

    expandEffect:     'fadeIn',
    collapseTimer:    0, // re-collapses after 5 seconds; default is 0, so no re-collapsing
    userCollapseText: 'Collapse' , // default is '[collapse expanded text]'

    afterExpand: function($thisElement) {

      var vendorParaID = $thisElement.attr('id');

      var underscore = vendorParaID.indexOf('_');

      var vendorID = vendorParaID.substring(0, underscore);

      $("#vendor_img_"+vendorID).attr({height : "308",
                      src : "img/m/"+vendorID+".jpg"
                      });


    },
    onCollapse: function($thisElement, byUser) {
      //alert($thisElement.attr('id'));
      var vendorParaID = $thisElement.attr('id');
      var underscore = vendorParaID.indexOf('_');

      var vendorID = vendorParaID.substring(0, underscore);


      $("#vendor_img_"+vendorID).attr({height : "80",
                      src : "img/m/"+vendorID+"-crop.jpg"
                      });


    }
  });

});

但是，图像的变化之间存在滞后。

我喜欢预加载图像，但随后我不确定如何正确交换它。

我查找了这两个链接，但我仍然不确定如何使其工作。

http://jquery-howto.blogspot.com/ 2009/02/preload-images-with-jquery.html http://jquery- howto.blogspot.com/2009/04/jquery-image-swap-or-how-to-replace.html

请告知。

Answer 1

我终于想通了。

首先在文档准备功能之前有这个

$preloadImgVendor = new Array();
  $preloadImgVendorCrop = new Array();

  {/literal}{foreach from=$venders item=vender name=vender}
  {literal}var id = {/literal}{$vender.id_manufacturer}{literal};
  $preloadImgVendor[id] = $("<img />").attr({height : "308",
                        width : "180",
                src : "img/m/"+id+".jpg",
                id : "vendor_img_"+id
                });
   $preloadImgVendorCrop[id] =  $("<img />").attr({height : "80",
                         width : "180",
                src : "img/m/"+id+"-crop.jpg",
                id : "vendor_img_"+id
                      });

  {/literal}{/foreach}{literal}

然后在扩展器内的相关行使用

$("#vendor_img_"+vendorID).replaceWith($preloadImgVendor[vendorID]);

或

$("#vendor_img_"+vendorID).replaceWith($preloadImgVendorCrop[vendorID]);

Answer 2

 ...
 <script>

    $(function() {

        $preloadImgVendor = new Array();
        $preloadImgVendorCrop = new Array();

        //automatically call function and variable objects with images with vendors Ids in "listIdsVendors"
        (function(aVendors){

            $.each(aVendors, function(i,val)
            {
                //check
                alert("vendor id load : " + i);

                $preloadImgVendor[i] = $("<img />").attr("src", "img/m/"+i+".jpg");
                $preloadImgVendorCrop[i] = $("<img />").attr("src", "img/m/"+i+"-crop.jpg");
            });

            //check
            alert("$preloadImgVendor length: " + $preloadImgVendor.length + "\n$preloadImgVendorCrop length: " + $preloadImgVendorCrop.length);


        })($("#listIdsVendors").text().split("-"));

      // override some default options
      $('div.expandable div').expander({
        slicePoint:       200,  // default is 100
        expandText:         'Expand', // default is 'read more...'

        expandEffect:     'fadeIn',
        collapseTimer:    0, // re-collapses after 5 seconds; default is 0, so no re-collapsing
        userCollapseText: 'Collapse' , // default is '[collapse expanded text]'

        afterExpand: function($thisElement) {
          var vendorParaID = $thisElement.attr('id');
          var underscore = vendorParaID.indexOf('_');
          var vendorID = vendorParaID.substring(0, underscore);

          //check
          alert($thisElement.attr('id') + " ; " + $($preloadImgVendor[vendorID]).attr("src"));

          $("#vendor_img_"+vendorID).attr({height : "308", src : ($preloadImgVendor[vendorID]).attr("src") });
        },
        onCollapse: function($thisElement, byUser) {
          var vendorParaID = $thisElement.attr('id');
          var underscore = vendorParaID.indexOf('_');   
          var vendorID = vendorParaID.substring(0, underscore);

          //check
          alert($thisElement.attr('id') + " ; " + $($preloadImgVendorCrop[vendorID]).attr("src"));

          $("#vendor_img_"+vendorID).attr({height : "80", src : $($preloadImgVendorCrop[vendorID]).attr("src") });
        }
      });

    });
</script>
</head>
<body>
    <div id="listIdsVendors" style="display:none">1-2-3-4-5-6</div>
    ...
</body>