关闭

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

标签: 图片懒加载
2332人阅读 评论(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
查看评论

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

echo.js是一个轻小的图片懒加载js插件,在使用过程中很多朋友可能是直接自定义一张占位图片,可能会造成图片的变形等。其实这并不是最佳的解决方案。下面给大家介绍另一种方法,简单的控制下css,实现loading效果 首先我们准备一张1*1px透明gif图片(blank.gif),和一个loadi...
  • Shirley_Ying
  • Shirley_Ying
  • 2016-11-16 15:41
  • 1188

Echo.js纯JavaScript图片延时加载插件

Echo.js 是一个独立的 JavaScript 插件,轻量级、体积小压缩版本不足1k,使用 HTML5 的 data- 自定义属性定义真实的图片地址,通过插件实现图片的延时加载,有效缓解服务器压力和浏览效果。 Echo.js主要是针对图片的延时加载,当用户滑动到图片的位置,在加载这个图片,...
  • kuangruike
  • kuangruike
  • 2016-09-01 16:14
  • 282

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

最近不是在学习设计模式吗,然后就看到了代理模式加载图片的样例,然后自己实现了一下,就发现,自己写的这货每次就只能加载一张图片,而且图片要放在哪也是个很严重的问题 然后就去了 gayhub 找了找了找流行的图片懒加载库,这一找,就找到了一个echo.j是,打开一看,源码只有100多行吧,震惊。。,看...
  • a54654132
  • a54654132
  • 2017-08-20 11:33
  • 260

Echo2入门文档

Echo2入门文档简介    Echo2(http://nextapp.com/)是一个开源的完全基于 Ajax 技术的开发框架,用它做出的系统是一个单页面系统,所有的界面更新都是通过不停的更新 DOM 来实现;而且系统只有一个 URL,所以用户很难通过 URL 来非法...
  • dongle2001
  • dongle2001
  • 2008-06-17 16:41
  • 2250

php中echo js中alert中文乱码问题的解决方法

很多朋友可能遇到这样的问题,在php文件中,大家可能经常这样用 echo "alert('请输入正确的手机号码');window.location.href='路径';"; 结果“请输入正确的手机号码”显示出来的是乱码。 ...
  • h330531987
  • h330531987
  • 2017-05-10 13:58
  • 831

jquery.superslider.js实现轮播图懒加载,一级jquery.lazyload.js实现图片的懒加载

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path =...
  • he_xiao123
  • he_xiao123
  • 2017-06-21 17:19
  • 1034

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

jquery.lazyload.js实现图片懒加载:个人理解是将需要延迟加载的图片的src属性全部设置为一张相同尽可能小(目的是尽可能的少占宽带,节省流量,由于缓存机制,当浏览器加载了一张图片之后,相同的图片就会在缓存中拿,不会重新到服务器上拿)的图片,然后将图片的实际地址写在alt属性里,当鼠标往...
  • fuyifang
  • fuyifang
  • 2014-10-26 10:27
  • 3853

Swiper + 图片懒加载

最近写网站有遇到图片懒加载的问题,在网上搜的大概有以下几种方法: 纯js,给图片加个class名(相当于标识),判断是否出现在当前滚屏的范围内 lazysizes插件(在网上搜的是这个对seo更好) lazyload(js/jquery插件两种) …… 因为主要是Swiper插件里有很多图,所以滚...
  • Mariosss
  • Mariosss
  • 2017-08-30 11:16
  • 965

echo.js图片懒加载插件

  • 2017-08-29 23:05
  • 9KB
  • 下载

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

转载自:http://demo.lanrenzhijia.com/2015/echo0625/
  • u010394015
  • u010394015
  • 2016-08-31 15:45
  • 2332
    个人资料
    • 访问:102322次
    • 积分:1522
    • 等级:
    • 排名:千里之外
    • 原创:48篇
    • 转载:22篇
    • 译文:0篇
    • 评论:25条
    文章分类