`
tomleader
  • 浏览: 9264 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

关于ItEye论坛的帖子里图片撑开页面的问题

阅读更多

大家好,ItEye的管理员好,废话我就不说了,先看看这个问题。

 

1.首先保证你的网速够慢(网速越慢看的越清楚),比如访问这个地址http://www.iteye.com/topic/125394  或者直接ctrl+f5刷新我当前的这个帖子,应该可以看到如下图的效果,帖子里的图片在加载过程中撑开了页面,出现了横向滚动条。(以下所有的图片如果看不清楚的话请点击查看原图 

 

—————————————————————粗糙糙的分割线————————————————————

 

 2.进一步观察,我用的是chrome自带的调试工具,也可以用firebug或其他来看。

如下图所示,在图片加载过程中,该图片的实际宽度为1284px,并且在dom结构中看到该img并没有设置特别的样式或属性。


 

—————————————————————粗糙糙的分割线————————————————————

 

3.观察图片完成后的情况。如下图所示。可以看到原来的img标签现在加上了width以及height属性,推测这里可能是用js判断图片load之后再加上的。


—————————————————————粗糙糙的分割线————————————————————

 4.问题总结:图片未加载之前没有限制宽高,所以导致网速慢的情况下,未设定宽高的图片溢出了。

 

 

—————————————————————粗糙糙的分割线————————————————————

5.问题解决:目前我有2种思路,一是js控制,但不是在图片加载完成之后,而是在domReady的时候就执行宽高限制,要求是后台在返回页面结构的时候,需要包含图片的原始尺寸大小(例如在图片文件名里或img标签的属性里包含图片的原始宽高信息),例如点点网的feed流里的图片(如下图,看不清的话可点开在新页面看),js处理的做法优点是比较灵活,宽高都可以控制,缺点是引入了一些业务关系不大的代码。


 

还有一种思路就是通过css来处理,例如下面我们网站的例子(福利图)http://www.123youxi.net/article/detail/26

 


 

关键就是这个img标签的样式, max-width:712px; 这句话保证了图片最大宽度,当然,一般情况下同时也需要设置父容器overflow:hidden。

同时考虑到IE浏览器不支持max-wdith,一般情况下需要增加一个css表达式,等价于max-width的一般写法如下:

*html .xxx img{width:expression(this.width>712?"712":auto);}

css的方式优点在于通过样式控制,可以在图片加载过程中就限制宽度,并且不会引入和业务逻辑无关的代码,个人比较推荐这种做法。缺点就是IE下引入了css表达式,并且只限制了宽度。当然,正常情况下限制宽度已经足够用了。

 

以上是个人愚见,请多指教。

  • 大小: 308.6 KB
  • 大小: 369.8 KB
  • 大小: 465.4 KB
  • 大小: 199.1 KB
  • 大小: 125.9 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics