Почему изображения в Mootools Multibox имеют полосы прокрутки в первый раз, когда они отображаются?

Question

Мы используем Mootools Multibox для отображения изображений.

В первый раз, когда мы просматриваем его с помощью Chrome и Safari, изображения увеличены и имеют полосы прокрутки. Когда мы перезагружаем страницу, изображения отображаются правильно без полос прокрутки.

Что может быть причиной этого?

Как мы можем исправить это, чтобы изображения отображались с их правильными размерами при первом просмотре в Chrome и Safari?

Answer 1

в этом блоке кода:

showContent: function(){ 
    this.box.removeClass('MultiBoxLoading'); 
    this.removeContent(); 
    this.contentContainer = new Element('div', { 
     'id': 'MultiBoxContentContainer', 
     'styles': { 
      opacity: 0, 
      width: this.contentObj.width, 
      height: (Number(this.contentObj.height)+this.contentObj.xH) 
     } 
    }).inject(this.box,'inside'); 

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

использует Asset.js, чтобы загрузить изображение здесь:

load: function(element){ 
    this.box.addClass('MultiBoxLoading'); 
    this.getContent(element); 
    if(this.type == 'image'){ 
     var xH = this.contentObj.xH; 
     this.contentObj = new Asset.image(element.href,{onload:this.resize.bind(this)}); 
     this.contentObj.xH = xH; 
    }else{ 
     this.resize(); 
    }; 
}, 

проблема, только после того, как OnLoad пожаров делает браузер знать фактическую ширину и высоту изображения (доступно через this.width/this.height if not bonund для класса). хотя это рано вернет объект изображения (в contentObj), вероятно, это еще не должно быть и нужно делать после того, как начнется перезагрузка onload. нагрузка здесь должна быть тем, что вводит изображение в контейнер и устанавливает ширину и высоту для его размещения. вместо, применяется this.resize(image)

Надеюсь, это даст вам некоторые идеи относительно того, как реорганизовать класс, чтобы он работал лучше.

ADDITONALLY: var xH = this.contentObj.xH; и this.contentObj.xH = xH; -> хранение элементов для других элементов непосредственно в объект? эта предварительная версия mootools 1.2, в которой введено ограничение на конкретное хранилище на каждом элементе. плохая практика, может привести к медлительности в IE, утечка памяти и т.д.

рефакторинга к this.contentObj.store("xH", something) с this.contentObj.retrieve("xH"), чтобы получить его обратно