颜色框未调整到正确的高度

Colorbox not resizing to the correct height

本文关键字:高度 调整 颜色      更新时间:2023-09-26

我正在尝试将内联HTML加载到一个颜色框中,该颜色框运行良好,只是颜色框没有调整到正确的高度。

内联HTML内容的高度很长(约15000像素),但只加载了900像素。

所以我开始使用colorbox.resize()函数来解决这个问题,例如:

        $('.inline-html').colorbox({ 
            onComplete : function() { 
               $(this).colorbox.resize(); 
            }    
        });

但调整大小功能只能工作到大约11000像素(而不是所需的15000像素)。但是,如果我刷新页面两次,它会加载全部15000像素。

有人能提出解决方案吗?

感谢

想法:

  1. 我看到过这种情况,当onComplete启动时,颜色框中有未加载的图像,因此颜色框的大小调整为内容的高度减去图像。然后加载图像并创建滚动条。如果可以为卸载的图像设置高度,问题可能会消失,因为colorbox会立即知道它的大小。例如:

    <p>Really long content.</p>
    <p>Really long content.</p>
    <img src="image.jpg" height="300">
    <p>Really long content.</p>
    

  1. 如果你知道颜色框将是15000像素,你能在css中将颜色框设置为那么高吗?还是运行$.colorbox.resize({height:"15,000"})

  1. 可能是最糟糕的选择,你可以在超时后调整它的大小,给图像加载时间。这是不可靠的,因为不同的人会在不同的时间加载图像,但如果问题出在图像上,这可能有助于解决问题。

    window.setTimeout($.colorbox.resize(), 500);