Lazyload 懒加载

简介

单图懒加载方法

                                    <div class="ax-article ax-padding">
                                        <blockquote>
                                            <p>一千年前的中国已经摆脱前代沉迷于异族的宗教，和以外国宗教为自己国教的状态。一千年前中国自己的宗教道教、儒教大放光芒，远远压过外国，这是国家文化强大民族自信的表现，一千年前的中国人自信得一塌糊涂。</p>
                                        </blockquote>
                                        <h2>一、简介</h2>
                                        <p>　　中国，是以<a href="###">华夏文明</a>为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
                                        <img lazyload 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 lazyload 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 lazyload 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 lazyload src="/v2.0/dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/full04.jpg">
                                    </div>
                                   

多图懒加载方法

                                <div class="ax-article ax-padding" axLazyload>
                                    <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>
                                          

其他媒体懒加载

                            <div class="ax-article ax-padding">
                                <blockquote>
                                    <p>一千年前的中国已经摆脱前代沉迷于异族的宗教，和以外国宗教为自己国教的状态。一千年前中国自己的宗教道教、儒教大放光芒，远远压过外国，这是国家文化强大民族自信的表现，一千年前的中国人自信得一塌糊涂。</p>
                                </blockquote>
                                <h2>一、简介</h2>
                                <p>　　中国，是以<a href="###">华夏文明</a>为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
                                <img lazyload 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>
                                <video controls="controls" lazyload data-src="https://src.axui.cn/v2.0/public/media/video.mp4">
                                    <source  type="video/mp4">
                                    　您的浏览器不支持播放该视频，<a href="###" class="ax-color-primary">点击这里更新浏览器</a>
                                </video>
                                <p>　　中国文化渊远流长、博大精深、绚烂多彩，是东亚文化圈的文化宗主国，在世界文化体系内占有重要地位，由于各地的地理位置、自然条件的差异，人文、经济方面也各有特点。传统文化艺术形式有诗词、戏曲、书法、国画等，而春节、元宵、清明、端午、中秋、重阳等则是中国重要的传统节日。</p>
                                <h2>二、词义</h2>
                                <p>　　中国一词最早见于西周初年的青铜器“何尊”铭文中的“余其宅兹中国，自之辟民”，同时又以“华夏”、“中华”、“中夏”、“中原”、“诸夏”、“诸华”、“神州”、“九州”、“海内”等的代称出现。</p>
                                <iframe lazyload src="###" data-src="https://www.axui.cn/index.php" frameborder="0" align="left" width="100%" height="400" scrolling="auto" class="ax-border"></iframe>
                                <p>　　“华夏”一词最早见于周朝《尚书·周书·武成》，“华夏蛮貊，罔不率俾”。 《书经》曰：“冕服采装曰华，大国曰夏”。《尚书正义》注：“冕服华章曰华，大国曰夏”。“华”，是指华丽、兴旺；也有说上古华、夏同音，本一字。《左传》曰：“中国有礼仪之大，故称夏；有服章之美，谓之华。” 华是指汉服，夏指行周礼的大国，故中国有礼仪之邦、衣冠上国之美誉。</p>
                                <h2>三、历史</h2>
                                <ol>
                                    <li>古代史</li>
                                    <li>近代史</li>
                                    <li>现代史</li>
                                </ol>
                                <h2>四、地理</h2>
                                <ul>
                                    <li>中国地势西高东低，山地、高原和丘陵约占陆地面积的67%，盆地和平原约占陆地面积的33%。</li>
                                    <li>几百万年前，青藏高原隆起，地球历史上此一重大地壳运动形成了中国的地貌。</li>
                                </ul>
                            </div>
                                   

显示动画

监听事件

参数选项

document.addEventListener("DOMContentLoaded", function() {
      var demo1 = new axLazyload('#ID',{
        type: 'single', //懒加载的内容类型，默认是single单文件模式，可选择multiple多文件模式、
        offset: '0px', //偏离顶部或底部多长距离触发，单位px，如果只有一个值则上下偏移值相同，如果需要单独定义请用英文逗号隔开，比如'-50px,-30px'表示上方偏移50px，下方偏移30px
        visible: [0, 0.5, 1], //可见区域占比，单位是小数，比如0.5表示目标50%的部分出现在屏幕中则触发，默认在刚显示、显示一半以及完全显示时触发
        parent: null,//以什么父节点为参照，默认null表示以整个视窗为参照
        animation: 'ax-fadeIn',//懒加载动画类名，默认是ax-fadeIn渐显，可选择ax-scaleIn或ax-fadeInUp
        dataName: 'src',//懒加载元素的data-*属性，默认是src，也就是懒加载元素将从data-src属性中获取真实地址
      });
});