jquery how to preload then swap images in a expander function?

Question

Hi

i am using expander.js a jquery plugin for expanding text.

Now here is the thing,

whenever the expand and collapse are triggered i am supposed to swap an image.

now usually that is not a problem.

One more piece of information is that there is a list of items which comes with expandable description and image hence the id inside the code.

EDIT: Will now display the full code.

The code is below:

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


    }
  });

});

However there is a lag between the change in the image.

I like to preload the image but then i am not sure how to swap it correctly.

I looked up these 2 links but i am still not sure how to make it work.

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

Please advise.

Answer 1

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

Answer 2

I finally figured it out.

first have this before the document ready function

$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}

Then inside the expander at the relevant lines use

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

or

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