代码之家 › 专栏 › 技术社区 › Kim Stacks

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

image-preloader image-manipulation jquery

0

Kim Stacks · 技术社区 · 16 年前

我正在使用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

请告知。

2 回复 | 直到 16 年前

1

andres descalzo 16 年前

 ...
 <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>

2

0

Kim Stacks 16 年前

我终于明白了。

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

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