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'，因为还没有添加图像。它是如何做到的？

非常感谢有人可以帮助我！

Mathijs

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的高度，在加载图像后，尝试通过getComputedStyle 读取其高度和宽度。同样，您可以将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黑客攻击的最好方法就是在图像标签中指定图像的宽度和高度。

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

3 个答案: