JQuery, как предварительно загрузить, а затем поменять изображения в функции расширения? - PullRequest
Новая
       10

JQuery, как предварительно загрузить, а затем поменять изображения в функции расширения?

0 голосов
/ 28 октября 2009

Я использую expander.js плагин jquery для расширения текста.

Теперь вот вещь,

всякий раз, когда происходит расширение и свертывание, я должен поменять изображение.

сейчас обычно это не проблема.

Еще одна информация - это список элементов, который поставляется с расширяемым описанием и изображением и, следовательно, идентификатором внутри кода.

EDIT: теперь будет отображать полный код.

Код ниже: 

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


    }
  });

});

Однако между изменениями в изображении существует задержка.

Мне нравится предварительно загружать изображение, но потом я не уверен, как правильно его поменять.

Я посмотрел эти 2 ссылки, но я все еще не уверен, как заставить это работать.

http://jquery -howto.blogspot.com / 2009/02 / предварительной загрузки изображения-с-jquery.html http://jquery -howto.blogspot.com / 2009/04 / JQuery-изображение замены или как-к-replace.html

Пожалуйста, сообщите.

Ответы [ 2 ]

1 голос
/ 28 октября 2009 
 ...
 <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>
0 голосов
/ 29 октября 2009

Я наконец понял это.

сначала получите это, прежде чем функция готовности документа 

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