JavaScript 处理后台动态返回数据的图片延迟加载
   3 分钟阅读

模拟后台返回的 JSON 数据,动态创建数据;

默认第一篇图片要加载;

剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;

显示出来的图片,逐渐显示出来,透明度不断增加;

滚动 2 屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;

HTML+CSS 样式如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>处理后台动态返回数据的图片延迟加载</title>
    <style type="text/css">
        #home_top {height: 48px;line-height:48px;font-size:18; text-align: center; color:#008CD7;}
        #home_bottom {color:#008CD7;text-align:center;font-size:14px;}
        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>
<h3 id="home_top">处理后台动态返回数据的图片延迟加载 - Powered By <a href="http://taobao.fm/"target="_blank">broszhu</a>  博客网址:<a href="http://taobao.fm/" target="_blank">taobao.fm</a> </h2>
    <p id="home_bottom">学习JavaScript是一件很有趣的事,可以做出很多自豪的小玩意!--broszhu (这个页面是实现原理:<a href="#" target="_blank">点此查看</a>)</p>
<div id="con">
    <ul>
    </ul>
</div>
<div id="top">回到顶部</div>
</body>
</html>

JavaScript 代码如下:

<script src="js/json.js"></script>
<script src="js/tools.min.js"></script>
<script >
    var tool = new Tool;//创建一个DOM库的实例;
    var oDiv = document.getElementById("con");
    var oUl = oDiv.getElementsByTagName("ul")[0];
    var oTop = document.getElementById("top");
    //动态引入json数据;
    var frg = document.createDocumentFragment();
    for (var i = 0; i < data.length; i++) {
        var cur = data[i];
        var oLi = document.createElement("li");
        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;//当滚动的时候,还要加载之前没有显示的图片,问题:之前加载过的图片存在多次重新的加载的问题
    oTop.onclick = toTop;//返回顶部功能;
    //需要加载的图片;
    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];
            var curTop = tool.offset(cur).top;
            var trueImg = cur.getAttribute("trueImg");
            if (curTop <= winTop && !cur.isLoad) {
                showTrueImg(cur, trueImg);
            }
        }
        //返回顶部出现的时间;
        var cH = getWin("clientHeight");
        if (!oTop.isMove) {
            oTop.style.display = (winTop >= (cH * 2)) ? "block" : "none";
        }
    }
    //替换加载图片
    function showTrueImg(cur, trueImg) {
        var oImg = new Image;
        oImg.src = trueImg;
        oImg.onload = function () {
            cur.src = trueImg;
            cur.isLoad = true;
            move(cur);
        }
    }
    //
    function getWin(attr) {
        return document.documentElement[attr] || document.body[attr];
    }
    //jQuery-->fadeIn//透明度逐渐显示;
    function move(curEle) {
        var count = 0;
        _move();
        function _move() {
            window.clearTimeout(curEle.timer);
            count += 0.02;
            if (count >= 1) {
                tool.setCss(curEle, "opacity", 1);
                return;
            }
            tool.setCss(curEle, "opacity", count);
            curEle.timer = window.setTimeout(_move, 10);
        }
    }
    //返回顶部;
    function toTop() {
        this.style.display = "none";
        this.isMove = true;
        var count = document.body.scrollTop;
        var cur = this;
        _toTop();
        function _toTop() {
            window.clearTimeout(cur.timer);
            if (count - 200 <= 0) {
                document.body.scrollTop = 0;
                cur.isMove = false;
                return;
            }
            count -= 200;
            document.body.scrollTop = count;
            cur.timer = window.setTimeout(_toTop, 10);
        }
    }
</script>
本文目录