微信公众号里图片的问题

Question

打开页面时加载中图片就有固定高度了，加载完之后也是稳的不行，不会撑高之类的，还没加载完怎么知道相应的图的高度呢？

Answer 1

最好用统一的loading图而不是固定高度

Answer 2

我记得图片本身就带有这相关的信息，比如文件是类型编码，尺寸是多少，拍摄地点信息，拍摄时间等。这些信息还是在

图片数据的最开头。但是浏览器是不是根据这个来给图片高度，我先找找文档。

----------------------- 更新

就找到了一个相关的问答，没有找到可靠的佐证

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 是怎么来的呢？

个人推测一下:

页面在后台生成的时候，从数据库中读出来的，没有档案验证，欢迎讨论。

Answer 3

lazy load 老铁