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

转载 2016年08月31日 15:45:11

转载自: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
});



相关文章推荐

echo.js 轻量级的js中的图片懒加载插件

echo.js是一个轻小的图片懒加载js插件,在使用过程中很多朋友可能是直接自定义一张占位图片,可能会造成图片的变形等。其实这并不是最佳的解决方案。下面给大家介绍另一种方法,简单的控制下css,实现l...

图片懒加载库echo.js源码学习

最近不是在学习设计模式吗,然后就看到了代理模式加载图片的样例,然后自己实现了一下,就发现,自己写的这货每次就只能加载一张图片,而且图片要放在哪也是个很严重的问题 然后就去了 gayhub 找了找了找...

echo JS代码

echo "alert('未审合或是不存在的信息!');history.back();"; 三元运算中不可使用 echo 可使用 print("alert('未审合或是不存在的信息!');h...

网页图片延迟加载LazyLoad.js使用方法介绍和实例

延迟加载图片插件LazyLoad.js的使用方法 我们常常会见到很多网页的图片并不是一打开页面就全部加载的,而是浏览到当前的图片位置才显示出来。这是怎么实现出来的呢?其实这就是目前较...
  • for12
  • for12
  • 2015年10月13日 17:24
  • 4138

获取当前请求页的URL以及来源URL

Request.Url获取当前请求页的URLRequest.UrlReferrer或Request.ServerVariables["HTTP_REFERER"]可以获取来源URLDefault.as...

echo.js图片懒加载插件

  • 2017年08月29日 23:05
  • 9KB
  • 下载

jquery的lazyload.js实现图片的懒加载

国内关于这个话题的文章不少,但是看了也试了就是没达到效果,搞得我很蛋疼。后面还是直接到官网去看,写的简单明了(http://www.appelsiini.net/projects/lazyload),...

js实现图片懒加载

js实现图片懒加载转载出处http://www.jianshu.com/p/4f6ea540516a现如今,网站载有的信息量越来越大,其中图片占据着很大一部分,这样一来可以使整个页以面图文结合的形式展...

JavaScript:原生JS实现图片懒加载

懒加载 用户体验 优化
  • GY_U_YG
  • GY_U_YG
  • 2017年06月12日 21:46
  • 1568

使用JS进行图片懒加载

前几天修改了之前APP的一些功能,发现图片的加载太慢了,而且一个页面显示太多图片的话其他js什么的也都延迟了加载,造成事件方法未加载、操作无效果,用户体验差。原因除了图片显示的有点多之外还有我们的服务...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用echo.js实现图片懒加载
举报原因:
原因补充:

(最多只允许输入30个字)