大家好,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
分享到:
相关推荐
这是我在iteye网站的技术博客
NULL 博文链接:https://itshu.iteye.com/blog/1754672
NULL 博文链接:https://enefry.iteye.com/blog/986651
iteye博客抓取 网页解析 关键字提取 jsoup解析网页 包含数据库文件
最新的ITeye月刊,覆盖各个It的行业最新信息,了解最新的咨询。
自己在公司无聊做的一个iteye论坛界面,纯手动代码,对于学习css+div的同学很有帮助,因为里面的东西只用到了一些常用的css,在所有浏览器上测试通过,纯css布局
NULL 博文链接:https://jiangtie.iteye.com/blog/1003878
ice最简单实现 ruby调用ice接口 - Ruby - language - ITeye论坛
javaMD5加密及登录验证(备忘) - Hibernate - Java - ITeye论坛.mhtjavaMD5加密及登录验证(备忘) - Hibernate - Java - ITeye论坛.mhtjavaMD5加密及登录验证(备忘
iteye.com 自动留言交友推广的小工具 博文链接:https://380071587.iteye.com/blog/1931124
Hibernate 缓存 深入 详解 ITEye
NULL 博文链接:https://angrycoder.iteye.com/blog/1711155
博文链接:https://nciky1984.iteye.com/blog/186416
ITeye新闻月刊
2.将图片上传与管理的JSP页面改写成SERVLET,同时去除JSON包; 3.添加图片压缩功能,对超出的宽高压缩成指定的值; 4.添加上传附件功能; 5.添加图片、附件按日期文件夹分类管理的功能; 6.添加上传图片、附件的...
ITeye Java编程 Spring框架 AJAX技术 Agile敏捷软件开发 ruby on rails实践 - ITeye做最棒的软件开发交流社区.files\homepage.css
NULL 博文链接:https://javaeedevelop.iteye.com/blog/1687630
图片去字,傻瓜化操作,解决你不会的难题~!
HTML5极速3D立体式图片相册切换效果,特效,工作,学习适用
NULL 博文链接:https://zhebushiren.iteye.com/blog/2041330