Проблема получения высоты от div после запроса ajax

Question

У меня проблема с получением высоты из div, который заполняется запросом ajax. Рассмотрим следующий код

(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

Как вы указали, ширина и высота изображений не будут известны браузеру до тех пор, пока они не будут загружены (если они не установлены вручную).

Вы можете использовать событие 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 2

Я также сталкивался с этой проблемой, я думаю, что лучший способ без необходимости выполнять сложные взломы javascript - просто указать ширину и высоту изображения в тегах изображения.

Answer 3

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/