javascript - 颜色框没有调整到正确的高度

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 会立即知道它的大小。前任：

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

---

2. 如果您知道颜色框将是 15,000 像素，您可以在 CSS 中将颜色框设置为那么高吗？还是跑$.colorbox.resize({height:"15,000"})？

---

3. 可能是最糟糕的选择，您可以在超时后调整它的大小，让图像有时间加载。这是不可靠的，因为图像会在不同的时间为不同的人加载，但如果问题出在图像上，这可能会帮助您进行故障排除。

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