起因
刷面试题看到懒加载、预加载问题时，随手在掘金搜了一下，搜到一篇文章。链接
看完原理后，把文章附的代码跑了一下，发现了一些问题。下面详细列一下。
问题
代码中附带很多中文符号。
这个很好解决，多选然后替换就可以了。
无法像预期那样实现懒加载。
实际上，这段代码的表现是首屏打开就会试图加载所有的图片，并不像理论所说当图片的dom元素出现在可视窗口才会进行加载。
简单翻阅了一下评论区，其实有人提到了这个问题。但当时的我还没有发现最根本的问题出自何处。我检查了一下懒加载函数内的循环，发现判定是否在可视区域的代码根本没有用，一股脑地全部判定为真了。
我纠结了很久之后才想起打印一下
document.documentElement.clientHeight确认一下。这一看才发现原来这个值就已经不符合预期了。它的值表现为整个页面的高度而非预期的可视部分的高度。我想起前不久写过的题目，也是懒加载。我翻出代码示例一跑，在它的代码示例中
clientHeight却是符合预期的可视窗口高度。我很懵逼，翻来覆去检查了好久的 HTML 元素，一会儿看看是不是给img添加 CSS 高度的问题，一会儿看看是不是修改了display的问题。但一无所获，我也试图查找搜索引擎是否有此先例，但没有超出我的预料。我看了很久很久才发现原代码中缺少头行的!<DOCTYPE html>标签。我加了上去一试，才得知原来是这个标签的影响。
知识点
此前就知道浏览器有不同的渲染模式，使用 DOCTYPE 标签启用标准模式，防止浏览器以非标准行为渲染。