JavaScript 调用后台数据进行图片延迟加载

🌙
手机阅读
本文目录结构

调用后台数据进行图片延迟加载

综合应用返回顶部的和静态图片延迟加载的;

创建文档碎片,调用后台的JSON文件,动态创建出来的多图片延迟加载;

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>处理后台动态返回数据的图片延迟加载</title>
    <style type="text/css">
        body, div, ul, li, img, p {
            margin: 0;
            padding: 0;
            font-family: "微软雅黑";
            font-size: 14px;
        }

        ul, li {
            list-style: none;
        }

        img {
            border: none;
        }

        html, body {
            width: 100%;
        }

        #con {
            margin: 10px 50px;
            padding: 10px;
            border: 1px dashed #ff0000;
        }

        #con li {
            padding: 5px 0;
            border-bottom: 1px dashed #ccc;
            overflow: hidden;
        }

        #con li img {
            display: block;
            float: left;
            width: 250px;
            opacity: 0;
            filter: alpha(opacity=0);
        }

        #con li p {
            display: block;
            float: right;
            width: 70%;
            line-height: 30px;
            font-size: 16px;
        }

        #top {
            display: none;
            position: fixed;
            right: 5px;
            bottom: 10px;
            padding: 2px;
            width: 36px;
            height: 36px;
            text-align: center;
            font-size: 13px;
            border-radius: 5px;
            background: #FFF38F;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="con"><ul></ul></div>
<div id="top">回到顶部</div>
<script type="text/javascript" src="js/json.js"></script>
<script >
    var oDiv = document.getElementById("con"),
        oUl  = oDiv.getElementsByTagName("ul")[0],
        oTop = document.getElementById("top");
    //创建文档碎片;
    var frg = document.createDocumentFragment();
    for (var i = 0; i < data.length; i++) {
        var cur = data[i];
        var oLi = document.createElement("li");
        //img/ddd.jpg是"暂无图片或者一些骨架图,预览图等"
        oLi.innerHTML = "<img src='img/ddd.jpg' trueImg='" + cur.img + "' alt=''/><p>" + cur.txt + "</p>";
        frg.appendChild(oLi);
    }
    oUl.appendChild(frg);
    /*创建完毕*/

    window.setTimeout(loadImg, 100);//默认加载第一屏显示的图片
    window.onscroll = loadImg;//当滚动的时候,还要加载之前没有显示的图片,问题:之前加载过的图片存在多次重新的加载的问题
    function loadImg() {
        var winTop = getWin("clientHeight") + getWin("scrollTop");
        var images = oUl.getElementsByTagName("img");
        for (var i = 0; i < images.length; i++) {
            var cur = images[i],
                curTop = offset(cur).top,
                trueImg = cur.getAttribute("trueImg");
            if (curTop <= winTop && !cur.isLoad) {//cur.isLoad自定义属性判断是否加载了
                showTrueImg(cur, trueImg);
            }
        }
        //回到顶部
        var cH = getWin("clientHeight");
        if (!oTop.isMove) {
            oTop.style.display = (winTop >= (cH * 2)) ? "block" : "none";
        }
    }
    function showTrueImg(ele, trueImg) {
        var oImg = new Image;
        oImg.src = trueImg;
        oImg.onload = function () {
            ele.src = trueImg;
            ele.isLoad = true;
            move(ele);
        }
    }

    //设置延迟显示
    function move(ele) {
        var speed = 0;
        _move();
        function _move() {
            window.clearTimeout(ele.timer);
            speed += 0.02;
            setCss(ele, "opacity", speed);
            if (speed >= 1) {
                setCss(ele, "opacity", 1);
                return;
            }
            ele.timer = window.setTimeout(_move, 10);
        }
    };

    function getWin(value) {
        return document.documentElement[value] || document.body[value];
    };
    function setCss(curEle,attr,value) {//设置CSS属性值;
        switch (attr) {
            case "opacity":
                curEle["style"][attr] = value;
                curEle["style"]["filter"] = "alpha(opacity=" + (value * 100) + ")";
                break;
            case "zIndex":
                curEle["style"][attr] = value;
                break;
            default:
                curEle["style"][attr] = !isNaN(value) ? value += "px" : value;
        }
    };
    function offset() {//获取偏移量;
        var curEle = arguments[0],
            par = curEle.offsetParent,
            left = curEle.offsetLeft,
            top = curEle.offsetTop;
        while (par) {
            left += par.offsetLeft;
            top += par.offsetTop;
            if (navigator.userAgent.indexOf("MSIE 8.0") <= -1) {
                left += par.clientLeft;
                top += par.clientTop;
            }
            par = par.offsetParent;
        }
        return {left: left, top: top};
    };

    /*返回顶部的代码*/
    oTop.onclick = toTop;
    function toTop() {
        this.style.display = "none";
        this.isMove = true;
        var count = document.body.scrollTop,
                _this = this;
        _toTop();
        function _toTop() {
            window.clearTimeout(_this.timer);
            if (count - 200 <= 0) {
                document.body.scrollTop = 0;
                _this.isMove = false;
                return;
            }
            count -= 200;
            document.body.scrollTop = count;
            _this.timer = window.setTimeout(_toTop, 10);
        }
    };
</script>
</body>
</html>

js

var data = [
    {
        "img": "img/1.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/2.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/3.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/4.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/5.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/6.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/7.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/8.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/9.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/10.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/1.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/2.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/3.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/4.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/5.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/6.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/7.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/8.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/9.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/10.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/1.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/2.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/3.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/4.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/5.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/6.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/7.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/8.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/9.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/10.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/1.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/2.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/3.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/4.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/5.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/6.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/7.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/8.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/9.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/10.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/1.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/2.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/3.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/4.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/5.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/6.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/7.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/8.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/9.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/10.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/1.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/2.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/3.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/4.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/5.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/6.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/7.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/8.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/9.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/10.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/1.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/2.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/3.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/4.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/5.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/6.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/7.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/8.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/9.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/10.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/1.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/2.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/3.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/4.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/5.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/6.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/7.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/8.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/9.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/10.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/1.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/2.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/3.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/4.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/5.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/6.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/7.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/8.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/9.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/10.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/1.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/2.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/3.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/4.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/5.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/6.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/7.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/8.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/9.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    },
    {
        "img": "img/10.jpg",
        "txt": "多个图片延迟加载的思路;;模拟后台返回的JSON数据,动态创建数据;默认第一篇图片要加载;剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;显示出来的图片,逐渐显示出来,透明度不断增加;滚动2屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;---By Broszhu"
    }
];

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>