在图像加载之前和之后在指定高度加载html图像描述div

Question

好的，所以我有一个页面可以将图像加载到div上，但它会在一秒后发生。图像有一些与之相关的描述和故事，但也会加载但速度要快得多。事实上，描述加载在屏幕顶部，然后＆＃34;移动＆＃34;当图像完成加载时。显然这很糟糕。我希望即使图像没有加载，描述也会加载图像加载后的预期位置。

结构是：

<div image />
<div description />

请帮忙，以便周末回家;）

Answer 1

您可以在加载图像时显示描述 - 使用jQuery以这种方式检测它：

$("#image").load(function (){
   alert("Image loaded!");
});

请参阅this answer了解详情

Answer 2

有几种方法可以解决您的问题。我建议你阅读this article。在那里，您将找到完全符合您需求的解决方案。至少它会显着减少图像跳跃

Answer 3

你有两种可能性（据我所见）：

• 加载图像后立即添加/显示描述（使用JS观看，加载图像时）
• 预先定义图像的宽度+高度（或纵横比）并保留该空间，以便图像加载到其中，甚至文本在其下方，它将从头开始处于正确的位置

Answer 4

一种方法是在描述标记中添加样式信息：

style="position: absolute; top: 1000px;"

这里1000px是实际图像的高度。这将确保描述加载在上边距下方1000像素处，为图像留出空间，然后在1秒后加载，而不会移动描述。