如何让含图片的tingle modal加载时完整显示并自动触发滚动条？

问题根源 #

模态框打开时内部图片还未加载完成，tingle modal初始计算内容高度时图片高度为0，无法触发滚动条件。调整浏览器窗口大小时tingle会主动重新计算尺寸，此时图片已加载完成高度正常，滚动条就会正常显示。

解决方案1：监听图片加载后手动触发模态框重绘 #

修改modal.js中的createModal函数，在模态框打开后监听内部所有图片的加载事件，加载完成后调用tingle原生的resize方法重新计算尺寸即可：

function createModal(content) {
    let $modal = new tingle.modal({
        footer: false,
        stickyFooter: false,
        closeMethods: ["overlay", "button", "escape"],
        closeLabel: "Close",
        cssClass: ["modal"],
        beforeClose: function() {
            return true;
        },
        onClose: function() {
            $modal.destroy();
        }
    });
    $modal.setContent(content);
    $modal.open();

    // 新增逻辑：监听所有图片加载完成后重新计算模态框尺寸
    const imgs = $modal.modal.querySelectorAll('img');
    imgs.forEach(img => {
        // 处理已缓存的图片
        if (img.complete) {
            $modal.resize();
            return;
        }
        // 监听图片加载完成事件
        img.addEventListener('load', () => {
            $modal.resize();
        }, { once: true });
    });
}

createModal("<div id='modal'><img id='sample' src='sample.jpg' /></div>");

解决方案2：提前声明图片宽高占位 #

如果能拿到图片的原始宽高，直接给<img>标签加上原生width和height属性，浏览器会自动计算图片占位的宽高比，不需要等待图片加载完成就能拿到正确的内容高度：

<!-- 替换成你自己图片的实际宽高数值 -->
<img id='sample' src='sample.jpg' width="1000" height="1600" />

搭配你现有样式里的img { width: 100%; height: auto; }即可生效，无需额外JS代码。

内容的提问来源于stack exchange，提问作者Satellite Sage