微信公众号里图片的问题

图片描述

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

阅读 4.1k
3 个回答

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

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

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

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

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

https://stackoverflow.com/que...

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

今天我在PC端浏览器打开了一个页面,看来一下代码的运行过程。得出的答案是,它是计算出来的。。。。

先说一下我的推导过程。

示例微信网页地址:

http://mp.weixin.qq.com/s?__b...

1) 打开页面,清除缓存,打开控制台查看 network,先不要向下拉,清空已有的网络信息,因为这篇文章上面的图片很多,且使用了懒加载,所以不用担心会全部加载完,为了便于查看懒加载新下载的图片建议清空已有的网络信息

2) 切换网络状态为离线,并向下拉动页面

clipboard.png

3) 查看页面上加载失败的图片的HTML

clipboard.png

clipboard.png

可以看到在图片元素上有行内样式,并且这个行内样式的级别很高。

4) 全文搜索 !important

全文搜索的方法:

a: 进入 source面板

b: 点击 top(或者其他最高层)

c: windows 下按下 ctrl+shift+F,会出来搜索框,输入 !important

具体情况如下所示:

clipboard.png

clipboard.png

好了分析一下搜索出来的代码,我们可以发现有一个js文件写入了这些样式信息(可以通过加断点来验证,下面第二幅图是断点验证)

clipboard.png

clipboard.png

接下来看一下代码,就可以知道图片的尺寸信息是通过计算得到的,那么是怎么样计算的呢?

具体来说就是看代码,我简单说一下我看代码中注意的点:

1) 我先只关注 width 宽度。宽的值为 width变量

clipboard.png

2) width变量的值来源是 width_ 和 parent_width 变量 ,而 width_ 的值是

clipboard.png

要么是定义好的最大宽度,要么是图片的 data-w 属性。

parent_width 类似,如下:

clipboard.png

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节点的宽度。其父节点举一个例子:

clipboard.png

clipboard.png

其实就是一个已经渲染过的元素,也就是说如果图片节点没有给出 data-w 属性值的时候,它就会通过种种函数

来计算节点的大小。

4) data-w 是什么?

继续在全局搜索 data-w 关键字,你会发现,除了当前文档外,别的文档中没有什么有价值的信息。

那么 data-w 是怎么来的呢?

个人推测一下:

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

lazy load 老铁

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题