從jQuery中的load（）函數中提取變量以供通用

我有一個我正在處理的幻燈片模塊，並且想要獲取原始圖像的寬度/高度（不是CSS呈現的框加載後的模型）來計算包含它所需的div的寬度/高度。周圍div的寬度/高度設置爲相應地擴大/縮小視口的大小。從jQuery中的load（）函數中提取變量以供通用

這裏是我的HTML結構，把一切工作正常：

<div id="listing_detail_photo_slider"> 

    <div id="listing_detail_photo_slider_strip"><div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/001.jpg&h=1440" alt="001 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/002.jpg&h=1440" alt="002 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/003.jpg&h=1440" alt="003 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/004.jpg&h=1440" alt="004 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/005.jpg&h=1440" alt="005 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/006.jpg&h=1440" alt="006 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/007.jpg&h=1440" alt="007 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/008.jpg&h=1440" alt="008 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/009.jpg&h=1440" alt="009 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/010.jpg&h=1440" alt="010 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/011.jpg&h=1440" alt="011 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/012.jpg&h=1440" alt="012 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/013.jpg&h=1440" alt="013 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/014.jpg&h=1440" alt="014 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/015.jpg&h=1440" alt="015 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/016.jpg&h=1440" alt="016 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/017.jpg&h=1440" alt="017 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/018.jpg&h=1440" alt="018 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/019.jpg&h=1440" alt="019 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/020.jpg&h=1440" alt="020 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/021.jpg&h=1440" alt="021 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/022.jpg&h=1440" alt="022 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/023.jpg&h=1440" alt="023 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/024.jpg&h=1440" alt="024 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/025.jpg&h=1440" alt="025 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/026.jpg&h=1440" alt="026 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/027.jpg&h=1440" alt="027 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/028.jpg&h=1440" alt="028 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/029.jpg&h=1440" alt="029 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/030.jpg&h=1440" alt="030 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/031.jpg&h=1440" alt="031 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/032.jpg&h=1440" alt="032 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/033.jpg&h=1440" alt="033 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/034.jpg&h=1440" alt="034 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/035.jpg&h=1440" alt="035 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      <div class="listing_gallery_thumbnail"> 
       <img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/036.jpg&h=1440" alt="036 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" /> 
      </div> 
      </div>

這是我的jQuery的最新版本運行的JavaScript代碼：

function showlisting_window_resize() { 
// deduct the height of the top bar from the total height of the viewport to get slideshow width. 
// we want bottom to hit the bottom of screen on first view, until users scroll.. 

var slideshowh = window.windowh-$('#header_container').height(); 
$('#listing_detail_photo_slider').height(slideshowh); 
$('#listing_detail_photo_slider_strip').height(slideshowh); 



var slideshoww = 0; // start at 0, add up all the widths with gaps. 
$('#listing_detail_photo_slider_strip div').each(function(){ 
    slideshoww = slideshoww + $(this).width()+5; 
    var img = $(this).find('img'); 
    var pic_real = new Array(); 
    $("<img/>").attr("src", $(img[0]).attr("src")).load(
     function() { 
      pic_real[0] = this.width; // Note: $(this).width() will not 
      pic_real[1] = this.height; // work for in memory images. 

     } 
    ); 

    console.log($(img[0]).attr("src")+' dimensions: '+pic_real[0]+' by '+pic_real[1]); 

}); 

$('#listing_detail_photo_slider_strip').width(slideshoww).delay(500).css('top', '0px'); 

// now position the prev/next slides 
// width:68px, height: 300px. 
var prevnexttop = (slideshowh-300)/2; // middle align the prev/next buttons vertically. 
$('#photo_slider_previous, #photo_slider_next').css('top',prevnexttop); 

activate_carousel();

}

控制檯。對數回報：

http://www.mydomain.ca/path/to/image.jpg dimensions: undefined by undefined

但是，當我把console.log行放在load（）下的function（）{}部分時，它就起作用了。

換句話說，我怎麼使用返回變量PIC

來源

2013-07-24 jeffkee

這是因爲console.log工作較早然後image.load()套值pic_real。

在load函數中添加不同的console.log函數並在函數之後。您將看到第二條消息（加載後）將首先顯示。

來源

2013-07-24 18:07:39

好吧，我明白這一點。但是，如何在load（）函數外部的pic_real var中根據返回輸出運行函數？ – jeffkee

這取決於你的目標是什麼，我想。 –

也許一些jQuery的人會幫助 - http://api.jquery.com/jQuery.when/ –

從jQuery中的load（）函數中提取變量以供通用

回答

相關問題