TGideas实例：加载，不只是少一点点(4)

，监听页面的scroll事件。一旦页面滚动，就会执行一个编写的函数，来判断对象是否处于浏览器的当前一屏内，如果是，将加载对象，如果不是，继续监听。当页面内的所有对象都被加载后，取消监听。

图3-1 执行流程

对于图片，滚动页面后，我们可以看到如图3-2的效果。

图3-2 图片滚动加载过程

2.1.2 板块滚动加载

其实把每个板块按照上面说的那种方式，像图片一样，滚动加载就可以实现这种效果，类似于bigPipe+Lazyload。

我们将页面拆分为框架、板块、板块内容，甚至可以细分到板块样式、板块脚本。当页面滚动完成时，判断处于当前屏的板块，动态并行加载板块内容。这种方式可以大大减少页面的加载量，但会影响SEO。

图3-3 板块滚动加载方式

2.2 点击加载

2.2.1 形式

点击后动态加载有很多形式，这是我们平时使用最多的方式。诸如页卡、翻页、展开、下拉、切屏等等都会使用到。以往的我们可能直接在页面写入内容，或者使用include载入，并将看不到的内容隐藏掉。但如果用户并没有点击切换，那么直接加载这些内容就产生多余的加载量。

图3-4 触发加载页卡内容

图3-5 翻页触发动态加载

2.2.2 触发加载

一般来说，动态填充数据的前期判断有两种形式。

一种是使用条件语句，判断内容区域是否有内容，如果没有，填充内容。这种方式最容易想到，但每次触发的时候都会判断一次。

另外一种是监听的方式。我们监听触发的对象是否被点击，如果点击，就像目标对象填充内容，然后取消这个监听。

图3-6 判断的两种方式

很显然，第二种方式只需执行一次，测试结果也表明这种方式是最快的。

2.2.3 数据插入方式

我们的新闻系统在生成新闻列表的时候，会根据我们的模板同时生成html页面、xml文件（我们很少使用）、json文件，在选择将列表插入页面的时候，我们有两种方式。

一种是动态加载json文件，用JS生成内容，插入页面；另一种是使用XHR加载html文件，使用responseText获取内容，插入页面。

图3-7 html文件

图3-8