关闭

使用echo.js实现图片懒加载

标签: 图片懒加载
1459人阅读 评论(0) 收藏 举报

转载自:http://demo.lanrenzhijia.com/2015/echo0625/

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				font-family: "微软雅黑";
			}
			
			ul li img {
				width: 300px;
				display: block;
				background: url('pic/bg.png') no-repeat center #ccc;
			}
		</style>
	</head>

	<body>
		<ul>
			<li>
				<img src="pic/blank.gif" data-echo="img/aaa.jpg" />
			</li>
			<li>
				<img src="pic/blank.gif" data-echo="img/aaa.jpg" />
			</li>
			<li>
				<img src="pic/blank.gif" data-echo="img/aaa.jpg" />
			</li>
			<li>
				<img src="pic/blank.gif" data-echo="img/aaa.jpg" />
			</li>
			<li>
				<img src="pic/blank.gif" data-echo="img/aaa.jpg" />
			</li>
			<li>
				<img src="pic/blank.gif" data-echo="img/aaa.jpg" />
			</li>
			<li>
				<img src="pic/blank.gif" data-echo="img/aaa.jpg" />
			</li>
			<li>
				<img src="pic/blank.gif" data-echo="img/aaa.jpg" />
			</li>
			<li>
				<img src="pic/blank.gif" data-echo="img/aaa.jpg" />
			</li>
			<li>
				<img src="pic/blank.gif" data-echo="img/aaa.jpg" />
			</li>
			<li>
				<img src="pic/blank.gif" data-echo="img/aaa.jpg" />
			</li>
			<li>
				<img src="pic/blank.gif" data-echo="img/aaa.jpg" />
			</li>
			<li>
				<img src="pic/blank.gif" data-echo="img/aaa.jpg" />
			</li>
			<li>
				<img src="pic/blank.gif" data-echo="img/aaa.jpg" />
			</li>
			<li>
				<img src="pic/blank.gif" data-echo="img/aaa.jpg" />
			</li>
			<li>
				<img src="pic/blank.gif" data-echo="img/aaa.jpg" />
			</li>
			<li>
				<img src="pic/blank.gif" data-echo="img/aaa.jpg" />
			</li>
			<li>
				<img src="pic/blank.gif" data-echo="img/aaa.jpg" />
			</li>
			<li>
				<img src="pic/blank.gif" data-echo="img/aaa.jpg" />
			</li>
			<li>
				<img src="pic/blank.gif" data-echo="img/aaa.jpg" />
			</li>
			<li>
				<img src="pic/blank.gif" data-echo="img/aaa.jpg" />
			</li>
		</ul>
		<script src="js/echo.js"></script>
		<script>
			echo.init();
		</script>
	</body>

</html>

echo.js代码

/*! echo.js v1.6.0 | (c) 2014 @toddmotto | https://github.com/toddmotto/echo */ ! function(t, e) {
    "function" == typeof define && define.amd ? define(function() {
        return e(t)
    }) : "object" == typeof exports ? module.exports = e : t.echo = e(t)
}(this, function(t) {
    "use strict";
    var e, n, o, r, c, a = {},
        d = function() {},
        u = function(t, e) {
            var n = t.getBoundingClientRect();
            return n.right >= e.l && n.bottom >= e.t && n.left <= e.r && n.top <= e.b
        },
        l = function() {
            (r || !n) && (clearTimeout(n), n = setTimeout(function() {
                a.render(), n = null
            }, o))
        };
    return a.init = function(n) {
        n = n || {};
        var u = n.offset || 0,
            i = n.offsetVertical || u,
            f = n.offsetHorizontal || u,
            s = function(t, e) {
                return parseInt(t || e, 10)
            };
        e = {
            t: s(n.offsetTop, i),
            b: s(n.offsetBottom, i),
            l: s(n.offsetLeft, f),
            r: s(n.offsetRight, f)
        }, o = s(n.throttle, 250), r = n.debounce !== !1, c = !!n.unload, d = n.callback || d, a.render(), document.addEventListener ? (t.addEventListener("scroll", l, !1), t.addEventListener("load", l, !1)) : (t.attachEvent("onscroll", l), t.attachEvent("onload", l))
    }, a.render = function() {
        for (var n, o, r = document.querySelectorAll("img[data-echo], [data-echo-background]"), l = r.length, i = {
                l: 0 - e.l,
                t: 0 - e.t,
                b: (t.innerHeight || document.documentElement.clientHeight) + e.b,
                r: (t.innerWidth || document.documentElement.clientWidth) + e.r
            }, f = 0; l > f; f++) o = r[f], u(o, i) ? (c && o.setAttribute("data-echo-placeholder", o.src), null !== o.getAttribute("data-echo-background") ? o.style.backgroundImage = "url(" + o.getAttribute("data-echo-background") + ")" : o.src = o.getAttribute("data-echo"), c || o.removeAttribute("data-echo"), d(o, "load")) : c && (n = o.getAttribute("data-echo-placeholder")) && (null !== o.getAttribute("data-echo-background") ? o.style.backgroundImage = "url(" + n + ")" : o.src = n, o.removeAttribute("data-echo-placeholder"), d(o, "unload"));
        l || a.detach()
    }, a.detach = function() {
        document.removeEventListener ? t.removeEventListener("scroll", l) : t.detachEvent("onscroll", l), clearTimeout(n)
    }, a
});



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:62925次
    • 积分:1026
    • 等级:
    • 排名:千里之外
    • 原创:34篇
    • 转载:19篇
    • 译文:0篇
    • 评论:16条
    文章分类
    最新评论