ajax请求后从div获取高度的问题

Question

我在获取由 ajax 请求填充的 div 的高度时遇到问题。考虑下面的代码

(function($) {
 $.fn.flickr = function(o){
 var s = {
api_key: '',              // [string]    required, see http://www.flickr.com/services/api/misc.api_keys.html
type: null,                 // [string]    allowed values: 'photoset', 'search', default: 'flickr.photos.getRecent'
photoset_id: null,          // [string]    required, for type=='photoset'  
text: null,                     // [string]    for type=='search' free text search
user_id: null,              // [string]    for type=='search' search by user id
group_id: null,             // [string]    for type=='search' search by group id
tags: null,                 // [string]    for type=='search' comma separated list
tag_mode: 'any',            // [string]    for type=='search' allowed values: 'any' (OR), 'all' (AND)
sort: 'date-posted-asc',    // [string]    for type=='search' allowed values: 'date-posted-asc', 'date-posted-desc', 'date-taken-asc', 'date-taken-desc', 'interestingness-desc', 'interestingness-asc', 'relevance'
thumb_size: 's',            // [string]    allowed values: 's' (75x75), 't' (100x?), 'm' (240x?)
size: 'o',                 // [string]    allowed values: 'm' (240x?), 'b' (1024x?), 'o' (original), default: (500x?)
per_page: 100,              // [integer]   allowed values: max of 500
page: 1,                      // [integer]   see paging notes
attr: '',                   // [string]    optional, attributes applied to thumbnail <a> tag
api_url: null,              // [string]    optional, custom url that returns flickr JSON or JSON-P 'photos' or 'photoset'
params: '',                 // [string]    optional, custom arguments, see http://www.flickr.com/services/api/flickr.photos.search.html
api_callback: '?',          // [string]    optional, custom callback in flickr JSON-P response
callback: null              // [function]  optional, callback function applied to entire        <ul>
 };
 if(o) $.extend(s, o);
 return this.each(function(){
 // create unordered list to contain flickr images
     var list = $('<ul>').appendTo(this);
   var url = $.flickr.format(s);
    $.getJSON(url, function(r){
  if (r.stat != "ok"){
    for (i in r){
        $('<li>').text(i+': '+ r[i]).appendTo(list);
    };
  } else {
    if (s.type == 'photoset') r.photos = r.photoset;
    // add hooks to access paging data
    list.append('<input type="hidden" value="'+r.photos.page+'" />');
    list.append('<input type="hidden" value="'+r.photos.pages+'" />');
    list.append('<input type="hidden" value="'+r.photos.perpage+'" />');
    list.append('<input type="hidden" value="'+r.photos.total+'" />');
    for (var i=0; i<r.photos.photo.length; i++){
      var photo = r.photos.photo[i];
      // format thumbnail url
      var t = 'http://farm'+photo['farm']+'.static.flickr.com/'+photo['server']+'/'+photo['id']+'_'+photo['secret']+'_'+s.thumb_size+'.jpg';
      //format image url
      var h = 'http://farm'+photo['farm']+'.static.flickr.com/'+photo['server']+'/'+photo['id']+'_';
      switch (s.size){
        case 'm':
          h += photo['secret'] + '_m.jpg';
          break;
        case 'b':
          h += photo['secret'] + '_b.jpg';
          break;
        case 'o':
          if (photo['originalsecret'] && photo['originalformat']) {
            h += photo['originalsecret'] + '_o.' + photo['originalformat'];
            break;
          };
        default:
          h += photo['secret'] + '.jpg';
      };
      list.append('<li><a href="'+h+'" '+s.attr+' rel="photographs"><img src="'+t+'" alt="'+photo['title']+'" /></a></li>');
    };
    if (s.callback) s.callback(list);

        $('#photographs ul li a img').fadeTo('fast', 0.7);

        $('#photographs ul li a img').hover(function() {
            $(this).fadeTo('fast', 1);
            },function() {
            $(this).fadeTo('fast', 0.7);
        });

        $("#photographs ul li a").fancybox({
            'hideOnContentClick': false,
            'zoomSpeedIn':      0, 
            'zoomSpeedOut': 0, 
            'overlayShow':      true,
            'overlayColor': '#000',
            'overlayOpacity': 0.9,
            'padding': 0
        });




           var outer = $('#photographs').outerHeight(),
           inner = $('#test').height();


           if(inner>outer){
               alert('Inner exceeded outer');
           }






      };
    });
});
};

最后，我在回调中的所有代码都在处理ajax添加的图像本身。我需要计算内部 div 的高度，但我总是得到“0”，因为图像尚未添加。它是如何做到这一点的？

如果有人能帮助我，非常感谢！

马蒂斯

Answer 1

Windlow.load 将确保加载所有图像

$(window).load(function(){
//initialize after images are loaded
});

此链接甚至对此进行了进一步解释

http://web.enavu.com/daily-tip/daily-tip-difference- Between-document-ready-and-window-load-in-jquery /

Answer 2

正如您所指出的，在加载图像之前，浏览器不会知道图像的宽度和高度（除非手动设置）。

您可以使用 Image 对象的“onload”事件作为触发器来读取高度和宽度属性。

关于 div 的高度，请尝试通过 getCompulatedStyle 读取其高度和宽度 图像加载后。同样，您可以使用 onload 事件作为触发器。

由于您将图像添加为标记而不是对象，因此您可能需要更改方法。例如，您可以跟踪对象中的图像加载：

var imageLoaded = {}; // Define above the loop 

然后，当您迭代照片集合时，您可以执行以下操作：

imageLoaded[t] = false;
var imgObject = new Image;
img.onload = function () {
  imageLoaded[this.src] = true;
  for (key in imageLoaded) {
    if (!imageLoaded[key]) {
      return;
    }
    // All images are loaded if we get here.
    // So, call the function that requires all
    // images to be loaded first.
  }
}
img.src = t;

我忘记了附加子元素的 jQuery 习惯用法是什么，但是您在哪里组装“li”、“a” ' 和 'img' 作为标记字符串，您可以将其拆分为单独的语句，以便将 img 元素作为对象处理。

Answer 3

我也遇到过这个问题，我认为不需要执行复杂的 javascript hack 的最佳方法是仅在图像标签中指定图像宽度和高度。