2016-10-21 48 views
1

好吧,所以我有一个页面加载到div的图像,但它发生在一秒钟后。该图像有一些与它相关的描述和故事,也加载但速度更快。实际上,描述在屏幕顶部加载,然后在图像加载完成时“移动”。显然这是不好的。我希望即使图片尚未加载,说明也会加载到图片加载后的预期位置。加载html图像说明div在指定的高度前后图像加载

结构为:

<div image /> 
<div description /> 

请帮帮忙,所以我可以回家过周末;)

回答

1

有几种方法可以解决你的问题。我建议你阅读this article。在那里你会找到一个完全适合你需求的解决方案。至少它会降低图像明显跳跃

+0

谢谢!这篇文章也做了一些类似于我的想法。检查我的答案。 – zalenix

1

可以显示的说明时加载图像 - 检测它以这种方式使用jQuery:

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

看到this answer为deails

+0

是的,我在那条路线上思考,但事实证明,以绝对的方式加载描述要简单得多,它最终应该放在哪里。感谢您的建议。 – zalenix

0

你甲肝È两种可能性(据我看到):

  • 添加/只要图像被加载(使用JS观看,加载图像时)显示说明
  • 预限定的宽度+图像的高度(或宽高比)并保留该空间,因此图像加载到该图像中,甚至文本在它下面,它将从开始处于正确位置
+0

是的,你是部分正确的 - 描述也应该加载到它的工作绝对定位。 – zalenix

0

一种方法是添加样式信息到描述标签:

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

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

+0

我也能回家;) – zalenix