如何使用echo.js实现图片的懒加载（整理）
如何使用echo.js实现图片的懒加载（整理）
一、总结
一句话总结：a、在img标签中添加data-echo属性加载真实图片：<img class="loading" src="blank.gif" data-echo="图片真实路径" />，在src属性中加载loading的那个图片； b、引入echo.js; c、在js代码中初始化echo.js（和别的js的用法一样）
1、echo.js中是如何判断元素距离出现在视野里的长度还有多少？
判断距离图片的高啊，element.getBoundingClientRect(),就能得到元素相对于视窗的四个距离
2、已经有了是否加载的判断函数，那么如何做到图片的懒加载？
先加载loadding小菊花图片，当满足懒加载的条件时候，切换img的src属性，
对于img元素的设置有两个比较重要的值一个是src，一个是data-echo ,（还有一个是背景图片，不太重要，忽略他）两个，src设置小菊花的地址，data-echo真实的地址；
3、echo.js的优点是什么？
Echo 是一个独立的 JavaScript 懒加载图像的工具，快速、体积小（不足1k）和使用 HTML5 的 data- 属性。Echo 支持 IE8+ 。
二、使用echo.js实现图片懒加载
参考：使用echo.js实现图片懒加载 - CSDN博客
https://blog.csdn.net/u010394015/article/details/52385791
<!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源码学习
参考：图片懒加载库echo.js源码学习 - CSDN博客
https://blog.csdn.net/a54654132/article/details/77427507
最近不是在学习设计模式吗，然后就看到了代理模式加载图片的样例，然后自己实现了一下，就发现，自己写的这货每次就只能加载一张图片，而且图片要放在哪也是个很严重的问题
然后就去了 gayhub 找了找了找流行的图片懒加载库，这一找，就找到了一个echo.j是，打开一看，源码只有100多行吧，震惊。。，看完源码，哎，木有上代理模式呀
仔细学习了下源码：觉得这种做法比较适合图片位置确定场景的吧，比如文章啊，一篇文章老长了，里面有蛮多图片散落在不同的地方，这样就比较合适，有可能有很多图片读者都不会翻到哪里，加载下来就浪费了
关键点：
1.如何判断元素距离出现在视野里的长度还有多少？以常见鼠标往下滚动，图片在下面为例
灵魂画手哈哈，，，；H1是视窗的高度，window.innerHeight可以获得，H2就是提供给使用者设置的offsetBottom
然后祭出一个大招！element.getBoundingClientRect(),就能得到元素相对于视窗的四个距离
var H=Element.getboundingclientrect().top;
var flag=H-(H1+H2);//当flag值小于0就代表可以开始加载图片了
那么，看看源码里面是怎么写的：
var offset = {//四个值由用户传入决定，默认为0
t: ,
b:,
l: ,
r:
};
var view = { //计算邻界的距离
l: 0 - offset.l,
t: 0 - offset.t,
b: (root.innerHeight || document.documentElement.clientHeight) + offset.b,
r: (root.innerWidth || document.documentElement.clientWidth) + offset.r
};
var isHidden = function (element) {
return (element.offsetParent === null); //element.offsetParent 表示父元素，如果为null证明没有在添加到DOM里面，或者position值为fixed
};
var inView = function (element, view) { //判断是否在视图中调用这个函数判断
if (isHidden(element)) { //判断是否在界面上
return false;
}
var box = element.getBoundingClientRect(); //计算四边的距离是否满足条件
return (box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b);
};
2.已经有了是否加载的判断函数，那么如何做到图片的懒加载?
先加载loadding小菊花图片，当满足懒加载的条件时候，切换img的src属性，
对于img元素的设置有两个比较重要的值一个是src，一个是data-echo ,（还有一个是背景图片，不太重要，忽略他）两个，src设置小菊花的地址，data-echo真实的地址；
那么所有页面元素都这样设置后，会有什么影响？
当所有图片都用设置src为同一值，也就是用同一张菊花图，加载完之后就可以通用了
img这个元素的特性就是，当设置了src属性，他会去先加载这张图图片，如果在js里面马上改变了img的src属性，他会同事再进行一次网络请求去加载你js设置的src地址的图片
但是 会先将html里面设置的src图片加载完，显示，你什么时候加载完第二个图片什么时候替换，如果你在第二张图片加载的时候又改变了src的值，，，那也是一样的，什么加载完什么时候显示，没加载完的情况下显示原来的
源代码：
if (inView(elem, view)) {//是否满足加载条件
if (unload) {//如果设置超出了不加载，保存小菊花地址在data-echo-placeholder属性
elem.setAttribute('data-echo-placeholder', elem.src);
}
if (elem.getAttribute('data-echo-background') !== null) {//img的背景图片
elem.style.backgroundImage = 'url(' + elem.getAttribute('data-echo-
background') + ')';
}
//当ele的src不等于data-echo的值，也就是真蒸的图片地址，改变图片的src
else if (elem.src !== (src = elem.getAttribute('data-echo'))) {
elem.src = src;
}
if (!unload) { //如果没有设置超出不加载，在这里就可以清除这些属性了
elem.removeAttribute('data-echo');
elem.removeAttribute('data-echo-background');
}
callback(elem, 'load');
}
else if (unload && !!(src = elem.getAttribute('data-echo-placeholder'))) {
//处理超出不加载图片的情况，把原来保存的小菊花图赋给elem的src
//因为小菊花是最开始就加载好了的，所以图片切换回小菊花，不再加载之前设置的真实图片
if (elem.getAttribute('data-echo-background') !== null) {
elem.style.backgroundImage = 'url(' + src + ')';
}
else {
elem.src = src;
}
elem.removeAttribute('data-echo-placeholder');
callback(elem, 'unload');
}
}
if (!length) {
echo.detach();//移除事件监听
}
3，scroll函数节流
函数节流，两种方式：
1：在滚动的时候不会触发，滚动停下来才会隔一段时间触发
2：每隔一段事件都触发
//第一种方式，每次滚动过程中一直触发，每次都会新清除上一次的setTimout，添加一个新的setTimout
var poll;
function throttle(){
clearTimeout(poll);
poll=setTimeout(function(){
echo.render();
},delay||250)
}
var poll;
function throttle(){
if(poll){ //存在setTimout,不清除，直接返回
return ;
}
clearTimout(poll)；
poll=setTimeout(function(){
echo.render();
poll=null; //允许再次添加定时器
},delay||250)
}
四、WEB前端 实现图片懒加载 echo.js
参考：WEB前端 实现图片懒加载 echo.js - CSDN博客
https://blog.csdn.net/weixin_38984353/article/details/80340795
echo.js是一个轻小的图片懒加载js插件，在使用过程中很多朋友可能是直接自定义一张占位图片，可能会造成图片的变形等。其实这并不是最佳的解决方案。下面给大家介绍另一种方法，简单的控制下css，实现loading效果
首先我们准备一张1*1px透明gif图片(blank.gif)，和一个loading图片。
<img class="loading" src="blank.gif" data-echo="图片真实路径" />- 1
Echo 是一个独立的 JavaScript 懒加载图像的工具，快速、体积小（不足1k）和使用 HTML5 的 data- 属性。Echo 支持 IE8+ 。
示例代码
<body>
<img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">
//blank.gif为预加载的照片，photo.jpg为最后显示的照片
<script src="dist/echo.js"></script>
<script>
Echo.init({
offset: 0,
throttle: 250 //设置图片延迟加载的时间
});
// Echo.render(); is also available for non-scroll callbacks
</script>
</body>如何使用echo.js实现图片的懒加载（整理）的更多相关文章
- js实现图片的懒加载
原文地址:https://blog.phyer.cn/article/9277.欢迎大家访问我的博客(●ˇ∀ˇ●) // 防抖 let lazy_timer; window.addEventListe ...
- JS怎样实现图片的懒加载以及jquery.lazyload.js的使用
在项目中有时候会用到图片的延迟加载,那么延迟加载的好处是啥呢? 我觉得主要包括两点吧,第一是在包含很多大图片长页面中延迟加载图片可以加快页面加载速度:第二是帮助降低服务器负担. 下面介绍一下常用的延迟 ...
- jquery.lazyload.js图片延迟加载(懒加载)--转载
一.插件介绍 jquery.lazyload.js 是一个用 JavaScript 编写的jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动 ...
- 滚动加载图片（懒加载）实现原理（这是旧实现，仅做为获取元素宽高api的参考）
https://www.cnblogs.com/flyromance/p/5042187.html 本文主要通过以下几方面来说明懒加载技术的原理,个人前端小菜,有错误请多多指出 一.什么是图片滚动加载 ...
- 如何在小程序实现图片lazy-load懒加载效果
自从跳一跳出现之后小程序又开始频繁出现了,在学习过程中发现小程序虽然好但是由于api不完善导致开发过程中有很多的坑,重点是网上相对小程序出现坑时解决方案显然比较少,小程序最让人觉得痛心疾首之一就是无法 ...
- 带你认识网站图片img懒加载和预加载的区别
懒加载 什么是懒加载? 懒加载也就是延迟加载.当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次,俗称占位图),只有当图片出现在浏览 ...
- 使用jquery插件实现图片延迟加载--懒加载技术
原文链接:http://www.cnblogs.com/lei2007/archive/2013/05/31/3110725.html 感谢作者.以下为原文,备忘仅供自己学习. 第一:lazyLoad ...
- Vue.js笔记 — vue-router路由懒加载
用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效,实现代码如下 ...
- Hibernate Lazy属性与懒加载 整理
lazy概念:要用到的时候,再去加载,对于关联的集合来说,只有当访问到的时候,才去加载它所关联的集合,比如一个user对应很多权限,只有当user.getRights()的时候,才发出select r ...
随机推荐
- PHP写文件到指定位置
<?php $fp = fopen("output.json", "r+"); $flag = fseek($fp, -3, SEEK_END); if( ...
- nginx假死导致的问题回顾
背景: 网络大致拓扑型 定位到一台Nginx节点于凌晨Timewait异常,等到6K. 进程异常,ngx_http_realtime_request模块错误 错误日志: 2017/02/24 00:0 ...
- @Html.Raw() 方法输出带有html标签的字符串
@Html.Raw() 方法输出带有html标签的字符串,如:@Html.Raw("<div style='color:red'>输出字符串</div>") ...
- rowcount和@@rowcount的区别
1 rowcount rowcount的作用就是用来限定后面的sql在返回指定的行数之后便停止处理,比如下面的示例, set rowcount 10select * from 表A 这样的查询只会返回 ...
- VBA关闭工作簿和退出Excel
VBA关闭工作簿和退出Excel链接:http://www.excelpx.com/thread-233045-1-1.html 兰色幻想VBA基础入门和高级开发全套80集视频教程,助你成为VBA开发 ...
- python requests请求卡住问题
最近经常接到别人反馈某个爬虫工具程序没有正常运行,需要下载的资讯数据也没有及时进行收录. 刚开始以为可能是机器的问题,偶尔机器会出现程序运行中途卡住的情况. 但随着异常的情况越来越频繁,我便只好去排查 ...
- ES6学习笔记（十）代理器Proxy
Java可以使用面向切面(AOP)的方法来实现某些统一的操作,比如某个操作的前置通知,后置通知等等,这种操作非常方便,其本质便是动态代理,JS的代理Proxy代理该如何使用呢? 某位大神的实现如下: ...
- ListView常用操作
1.设置ListView只显示一列,并且每加一条记录是向下添加的. ListView添加方法:把View属性改成Details,再Columns属性中添加一列 然后用如下代码即可实现 ListView ...
- Appium Android Bootstrap源代码分析之启动执行
通过前面的两篇文章<Appium Android Bootstrap源代码分析之控件AndroidElement>和<Appium Android Bootstrap源代码分析之命令 ...
- colorscheme-如何vim颜色风格
我们vim默认的风格是黑底的,如果我们想要更换其他的风格,比如字体高亮的颜色.注释的颜色等.这时候我们就需要一个属性了,如下 colorscheme darkblue 这个属性的值,其实是在 /usr ...