0

我有一个正在处理的幻灯片模块,我想获取原始图像的宽度/高度(不是加载后的 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

4

1 回答 1

0

发生这种情况是因为console.log工作较早,然后image.load()pic_real.

在函数中和之后添加不同console.log的消息。load您将看到第二条消息(加载后)将首先显示。

于 2013-07-24T18:07:39.403 回答