Почему изображения в 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();
    };
},

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

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

ДОПОЛНИТЕЛЬНО: var xH = this.contentObj.xH;и this.contentObj.xH = xH; -> хранение элементов для других элементов непосредственно в объекте?это предшествует MooTools 1.2, который вводит закрытие на основе uid для каждого элемента.плохая практика, может вызвать медлительность в IE, утечки памяти и т. д.

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