javascript - 为什么 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 触发后，浏览器才知道图像的实际宽度和高度(如果不绑定(bind)到类范围，则可以通过 this.width/this.height 获得)。虽然这会提前返回一个图像对象(进入 contentObj)，但它可能不应该现在就返回，而应该在 onload 触发后执行。这里的 onload 应该是将图像注入(inject)到容器中并设置宽度和高度来托管它。 相反，它应用this.resize(image)

我希望这能给您一些关于如何重构该类以使其更好地工作的想法。

另外:var xH = this.contentObj.xH; 和 this.contentObj.xH = xH; -> 直接将其他元素存储到对象中？这早于 mootools 1.2，它引入了基于闭包的每个元素的 uid 特定存储。不好的做法，可能会导致 IE 缓慢、内存泄漏等。

使用 this.contentObj.retrieve("xH") 重构 this.contentObj.store("xH", Something) 以将其恢复