我有一个正在处理的幻灯片模块,我想获取原始图像的宽度/高度(不是加载后的 CSS 渲染框模型)来计算包含它所需的 div 的宽度/高度。周围 div 的宽度/高度设置为根据视口的大小相应地扩展/收缩。
这是我的 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();
}
console.log 返回:
http://www.mydomain.ca/path/to/image.jpg dimensions: undefined by undefined
但是,当我将 console.log 行放在 load() 下的 function(){} 部分中时,它就可以工作了。
换句话说,我如何使用返回的变量 pic