关于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表达式，并且只限制了宽度。当然，正常情况下限制宽度已经足够用了。

 

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

广告贴