Colorbox未调整到正确的高度

Question

我正在尝试将内联HTML加载到一个工作正常的颜色框中，但颜色框没有调整到正确的高度。

内联HTML内容的高度非常长（大约15,000像素），但只加载了900像素。

所以我开始使用colorbox.resize（）函数来解决问题，例如：

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

但调整大小功能最多只能处理大约11,000个像素（不是所需的15,000个像素）。但是，如果我刷新页面两次，它会加载完整的15,000像素。

有人可以建议一个解决方案吗？

由于

Answer 1

思路：

1. 我已经看到，当onComplete触发时，colorbox中的图像未加载时会发生这种情况，因此colorbox会调整内容的高度减去图像。然后加载图像并创建滚动条。如果您可以为卸载的图像设置高度，问题可能会消失，因为colorbox会立即知道它的大小。例如：

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

---

1. 如果您知道彩色盒将是15,000像素，您可以将彩色盒设置为高css吗？或者运行$.colorbox.resize({height:"15,000"})？

---

1. 可能是最差的选项，您可以在超时后调整大小以使图像有时间加载。这是不可靠的，因为图像将在不同时间为不同的人加载，但如果问题是图像，这可能有助于您排除故障。

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