Lazyload 懒加载

                                    <h5>异步请求json</h5>
                                    <div class="ax-article" id="ajaxjson" data-src="ajax/china.json" style="min-height:100px;">加载中...</div>
                                    <div class="ax-break"></div>
                                    <h5>异步请求sql</h5>
                                    <div class="ax-article" id="ajaxsql" data-src="ajax/chinaSql.php" data-async="limit:3" style="min-height:100px;">加载中...</div>
                                                          

                                            let tpl = `<dt><# this.label #></dt><dd><# this.content #></dd>`;
                                            new axLazyload('#ajaxjson', {
                                                onAsync: (data) => {
                                                    //data={response:'',data:'',dom:''}
                                                    let dlDom = axAddElem('dl');
                                                    data.dom.appendChild(dlDom);
                                                    data.response.forEach(k => {
                                                        let html = axTplEngine(tpl, k);
                                                        dlDom.innerHTML += html;
                                                    });
                                                }
                                            });
                                            new axLazyload('#ajaxsql', {
                                                onAsync: (data) => {
                                                    //data={response:'',data:'',dom:''}
                                                    let dlDom = axAddElem('dl');
                                                    data.dom.appendChild(dlDom);
                                                    data.response.forEach(k => {
                                                        let html = axTplEngine(tpl, k);
                                                        dlDom.innerHTML += html;
                                                    });
                                                }
                                            });
                                            

[
    {
        "label": "自然环境",
        "content": "中国位于亚洲东部，太平洋西岸。北起漠河附近的黑龙江江心，南到南沙群岛的曾母暗沙。西起帕米尔高原，东至黑龙江、乌苏里江汇合处。陆地面积960万平方千米，陆上边界2万多千米。"
    },
    {
        "label": "行政区划",
        "content": "截至2020年底，中国共有34个省级行政区（包括23个省、5个自治区、4个直辖市、2个特别行政区）、333个地级行政区、2844个县级行政区、38741个乡级行政区。北京是中国的首都。"
    },
    {
        "label": "人口",
        "content": "全国总人口为1443497378人，其中：普查登记的大陆31个省、自治区、直辖市和现役军人的人口共1411778724人；香港特别行政区人口为7474200人；澳门特别行政区人口为683218人；台湾地区人口为23561236人。"
    },
    {
        "label": "饮食",
        "content": "经过千年的发展独自形成了中国饮食文化，中国饮食文化是一种广视野、深层次、多角度、高品位的悠久区域文化；是中国人民在生产和生活实践中，在食源开发、食具研制、食品调理、营养保健和饮食审美等方面创造、积累并影响周边国家和世界的物质财富及精神财富。"
    }
]
                                            

                                                <?php
                                                header("Content-Type:text/plain;charset=utf-8");
                                                //连接数据库，数据库用户自己定义
                                                $server="数据库地址";
                                                $username="数据库用户名";
                                                $password="数据库密码";
                                                $database="数据库名";
                                                $table = '表名';
                                                $connect = mysql_connect($server,$username,$password) or die("数据库链接错误");
                                                mysql_select_db($database,$connect);
                                                mysql_query("set names 'utf8'");
                                                
                                                $limit = !empty($_POST[limit])?' limit '.$_POST[limit]:'';
                                                
                                                //检索最终数据
                                                $sqlString="select * from {$table} $limit";
                                                $sql=mysql_query($sqlString);
                                                
                                                //根据数据生成对象数组
                                                $result = array();
                                                while ($row = mysql_fetch_object($sql)){
                                                    array_push($result,$row);
                                                }
                                                $success = json_encode($result);
                                                echo $success;
                                                
                                                ?>
                                            

                                            <div class="ax-article ax-padding" id="ani">
                                                <blockquote>
                                                    <p>一千年前的中国已经摆脱前代沉迷于异族的宗教，和以外国宗教为自己国教的状态。一千年前中国自己的宗教道教、儒教大放光芒，远远压过外国，这是国家文化强大民族自信的表现，一千年前的中国人自信得一塌糊涂。</p>
                                                </blockquote>
                                                <h2>一、简介</h2>
                                                <p>　　中国，是以<a href="###">华夏文明</a>为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
                                                <img src="/v2.0/dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/full01.jpg">
                                                <p>　　中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。</p>
                                                <p>　　中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。</p>
                                                <img src="/v2.0/dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/full02.jpg">
                                                <p>　　中国文化渊远流长、博大精深、绚烂多彩，是东亚文化圈的文化宗主国，在世界文化体系内占有重要地位，由于各地的地理位置、自然条件的差异，人文、经济方面也各有特点。传统文化艺术形式有诗词、戏曲、书法、国画等，而春节、元宵、清明、端午、中秋、重阳等则是中国重要的传统节日。</p>
                                                <h2>二、词义</h2>
                                                <p>　　中国一词最早见于西周初年的青铜器“何尊”铭文中的“余其宅兹中国，自之辟民”，同时又以“华夏”、“中华”、“中夏”、“中原”、“诸夏”、“诸华”、“神州”、“九州”、“海内”等的代称出现。</p>
                                                <p>　　“华夏”一词最早见于周朝《尚书·周书·武成》，“华夏蛮貊，罔不率俾”。 《书经》曰：“冕服采装曰华，大国曰夏”。《尚书正义》注：“冕服华章曰华，大国曰夏”。“华”，是指华丽、兴旺；也有说上古华、夏同音，本一字。《左传》曰：“中国有礼仪之大，故称夏；有服章之美，谓之华。” 华是指汉服，夏指行周礼的大国，故中国有礼仪之邦、衣冠上国之美誉。</p>
                                                <img src="/v2.0/dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/full03.jpg">
                                                <h2>三、历史</h2>
                                                <ol>
                                                    <li>古代史</li>
                                                    <li>近代史</li>
                                                    <li>现代史</li>
                                                </ol>
                                                <h2>四、地理</h2>
                                                <ul>
                                                    <li>中国地势西高东低，山地、高原和丘陵约占陆地面积的67%，盆地和平原约占陆地面积的33%。</li>
                                                    <li>几百万年前，青藏高原隆起，地球历史上此一重大地壳运动形成了中国的地貌。</li>
                                                </ul>
                                                <img src="/v2.0/dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/full04.jpg">
                                            </div>
                                                      

                                            let aniIns = new axLazyload('#ani', {
                                                animation: 'ax-fadeInUp',
                                            });
                                        

                                    <div id="method" style="height:400px;overflow: auto;">
                                        <article>
                                            <img src="<?=$local?>dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/full01.jpg">
                                            <div class="ax-break"></div>
                                            <img src="<?=$local?>dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/full02.jpg">
                                            <div class="ax-break"></div>
                                            <img src="<?=$local?>dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/full03.jpg">
                                            <div class="ax-break"></div>
                                            <img src="<?=$local?>dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/full04.jpg" id="last01">
                                            <div class="ax-break"></div>
                                            <img src="<?=$local?>dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/full05.jpg" id="last02">
                                        </article>
                                    </div>
                                    <div class="ax-break"></div>
                                    <div class="ax-align-center">
                                        <a href="###" class="ax-btn" id="methodRemove">取消最后两张图片监听</a>
                                        <a href="###" class="ax-btn" id="methodAdd">添加最后两个图片监听</a>
                                        <a href="###" class="ax-btn" id="methodAddAll">全部图片添加监听</a>
                                    </div>
                                                      

                                            let methodIns = new axLazyload('#method', {
                                                animation: 'ax-fadeInUp',
                                                parent:'#method',
                                                onBefore:()=>{
                                                    //先阻止
                                                    return false;
                                                }
                                            }),
                                                methodAdd = document.querySelector('#methodAdd'),
                                                methodAddAll = document.querySelector('#methodAddAll'),
                                                methodRemove = document.querySelector('#methodRemove');
                                            methodRemove.onclick = () => {
                                                methodIns.remove('#last01,#last02', (doms) => {
                                                    console.log('取消监听的节点', doms)
                                                });
                                            }
                                            methodAdd.onclick = () => {
                                                methodIns.add('#last01,#last02', (doms) => {
                                                    console.log('增加监听的节点', doms)
                                                });
                                            }
                                            methodAddAll.onclick = () => {
                                                //this.items是实例中内置变量，即当前加入监听的节点
                                                let items = methodIns.items
                                                methodIns.add(items, (doms) => {
                                                    console.log('增加监听的节点', doms)
                                                });
                                            }
                                        

                                        <div class="ax-article ax-padding" id="on">
                                            <img src="/v2.0/dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/full01.jpg">
                                            <div class="ax-break"></div>
                                            <img src="/v2.0/dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/full02.jpg">
                                            <div class="ax-break"></div>
                                            <img src="/v2.0/dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/full03.jpg">
                                        </div>
                                        

                                            let onIns = new axLazyload('#on');
                                            onIns.on('show', function (img) {
                                                console.log('开始显示了图片：' + img.src);
                                            }).on('showing', function (img) {
                                                console.log('正在显示了图片：' + img.src);
                                            }).on('shown', function (img) {
                                                console.log('完全显示了图片：' + img.src);
                                            });