打开页面时加载中图片就有固定高度了,加载完之后也是稳的不行,不会撑高之类的,还没加载完怎么知道相应的图的高度呢?
我记得图片本身就带有这相关的信息,比如文件是类型编码,尺寸是多少,拍摄地点信息,拍摄时间等。这些信息还是在
图片数据的最开头。但是浏览器是不是根据这个来给图片高度,我先找找文档。
----------------------- 更新
就找到了一个相关的问答,没有找到可靠的佐证
https://stackoverflow.com/que...
------------------------ 更新
今天我在PC端浏览器打开了一个页面,看来一下代码的运行过程。得出的答案是,它是计算出来的。。。。
先说一下我的推导过程。
示例微信网页地址:
http://mp.weixin.qq.com/s?__b...
1) 打开页面,清除缓存,打开控制台查看 network,先不要向下拉,清空已有的网络信息,因为这篇文章上面的图片很多,且使用了懒加载,所以不用担心会全部加载完,为了便于查看懒加载新下载的图片建议清空已有的网络信息
2) 切换网络状态为离线,并向下拉动页面
3) 查看页面上加载失败的图片的HTML
可以看到在图片元素上有行内样式,并且这个行内样式的级别很高。
4) 全文搜索 !important
全文搜索的方法:
a: 进入 source面板
b: 点击 top(或者其他最高层)
c: windows 下按下 ctrl+shift+F,会出来搜索框,输入 !important
具体情况如下所示:
好了分析一下搜索出来的代码,我们可以发现有一个js文件写入了这些样式信息(可以通过加断点来验证,下面第二幅图是断点验证)
接下来看一下代码,就可以知道图片的尺寸信息是通过计算得到的,那么是怎么样计算的呢?
具体来说就是看代码,我简单说一下我看代码中注意的点:
1) 我先只关注 width 宽度。宽的值为 width变量
2) width变量的值来源是 width_ 和 parent_width 变量 ,而 width_ 的值是
要么是定义好的最大宽度,要么是图片的 data-w 属性。
parent_width 类似,如下:
3) 所以关注点几种到了 getParentWidth 这个函数上。
var getParentWidth = function(dom){
var parent_width = 0;
var parent = dom.parentNode;
var outerWidth = 0;
while (true) {
var parent_style = getComputedStyle(parent);
if (!parent || !parent_style) break;
parent_width = parent.clientWidth - parseFloat(parent_style.paddingLeft) - parseFloat(parent_style.paddingRight) - outerWidth;
if (parent_width > 0) break;
outerWidth += parseFloat(parent_style.paddingLeft) + parseFloat(parent_style.paddingRight) + parseFloat(parent_style.marginLeft) + parseFloat(parent_style.marginRight) + parseFloat(parent_style.borderLeftWidth) + parseFloat(parent_style.borderRightWidth);
parent = parent.parentNode;
}
return parent_width;
}
上面的代码就是 getParentWidth 函数。其实内部逻辑也就是计算dom节点的宽度。其父节点举一个例子:
其实就是一个已经渲染过的元素,也就是说如果图片节点没有给出 data-w 属性值的时候,它就会通过种种函数
来计算节点的大小。
4) data-w 是什么?
继续在全局搜索 data-w 关键字,你会发现,除了当前文档外,别的文档中没有什么有价值的信息。
那么 data-w 是怎么来的呢?
个人推测一下:
页面在后台生成的时候,从数据库中读出来的,没有档案验证,欢迎讨论。
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
5 回答1.9k 阅读
最好用统一的
loading
图而不是固定高度