不依赖jquery的图片LazyLoad按需加载js-echo.js

echo.min.js源码如下:

/*! echo.js v1.7.0 | (c) 2015 @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={},u=function(){},d=function(t){return null===t.offsetParent},i=function(t,e){if(d(t))return!1;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 d=n.offset||0,i=n.offsetVertical||d,f=n.offsetHorizontal||d,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,u=n.callback||u,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]"),d=r.length,l={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;d>f;f++)o=r[f],i(o,l)?(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"),o.removeAttribute("data-echo-background")),u(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"),u(o,"unload"));d||a.detach()},a.detach=function(){document.removeEventListener?t.removeEventListener("scroll",l):t.detachEvent("onscroll",l),clearTimeout(n)},a});

html代码:

<img class = "list_pic" src = "img/blank.gif" data-echo="demo.jpg" alt = "按需加载例子">

<script src="echo.min.js"></script>

<script>
echo.init({
offset : 100,
throttle : 250,
unload : false,
callback : function(element, op) {
console.log(element, ‘has been‘, op + ‘ed‘)
}
});
</script>

时间: 2024-11-23 14:38:08

不依赖jquery的图片LazyLoad按需加载js-echo.js的相关文章

图片滚动按需加载

对于图片缓存加载jquery有很多插件可以使用,一行代码就能搞定,可对于移动端并且在dom操作不多的情况下用jquery未免就有点拿大炮打蚊子的赶脚了,所以自己写了个原生的,有写的的不好的和需要优化的地方希望大家不吝赐教. 首先先获取需要缓存加载图片距浏览器顶部的距离,然后把页面上所有的img的实际地址写到alt上去,src全部用一张默认通用图 function getTop(dom){ var top = dom.offsetTop; var parent = dom; while(paren

解决导航下图片不能按需加载的问题减少对资源请求数量

问题描述:在一个三段式的navbar中,各段下面有一个长图(类似这样的) 在优化之前需要加载三张大图这无疑增加了资源请求数量 因此,我想到了将图片转换为背景以此减少请求没想到方案是可行的,上代码 <div class="page-navbar"> <!-- navbar --> <mt-navbar class="page-part" v-model="selected" swipeable> <mt-t

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

最近不是在学习设计模式吗,然后就看到了代理模式加载图片的样例,然后自己实现了一下,就发现,自己写的这货每次就只能加载一张图片,而且图片要放在哪也是个很严重的问题 然后就去了 gayhub 找了找了找流行的图片懒加载库,这一找,就找到了一个echo.j是,打开一看,源码只有100多行吧,震惊..,看完源码,哎,木有上代理模式呀 仔细学习了下源码:觉得这种做法比较适合图片位置确定场景的吧,比如文章啊,一篇文章老长了,里面有蛮多图片散落在不同的地方,这样就比较合适,有可能有很多图片读者都不会翻到哪里,

图片的按需加载

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #ul1{ margin: 100px auto 0; padding: 0; } li{ float: left; margin: 0 0 10px 10px; list-style: none; border: 1px solid black; }

按需加载/懒加载

按需解析HTML 按需解析HTML,就是页面一开始不解析HTML,根据需要来解析HTML.解析HTML都是需要一定时间,特别是HTML中包含有img标签.引用了背景图片时,如果一开始就解析,那么势必会增加请求数.常见的有对话框.拉菜单.多标签的内容展示等,这些一开始是不需要解析,可以按需解析. 实现按需解析,首先用<script type=”text/x-template”>html</sccript> 这个标签来对忽略对HTML的解析.然后根据触发的动作,把script里面的HT

“按需加载”的应用(转)

按需加载是前端性能优化中的一项重要措施,按需加载是如何定义的呢?顾名思义,指的是当用户触发了动作时才加载对应的功能.触发的动作,是要看具体的业务场景而言,包括但不限于以下几个情况:鼠标点击.输入文字.拉动滚动条,鼠标移动.窗口大小更改等.加载的文件,可以是JS.图片.CSS.HTML等.后面将会详细介绍“按需”的理解. 按需解析HTML 按需解析HTML,就是页面一开始不解析HTML,根据需要来解析HTML.解析HTML都是需要一定时间,特别是HTML中包含有img标签.引用了背景图片时,如果一

性能优化之 - 按需加载

按需加载是网站性能优化立竿见影的其中一项,按需加载可以了解为 当用户触发某个动作的时候,才主动去请求资源,这样带来的优化好处:减少了HTTP请求,节省宽带,让页面首屏的内容更快展现在用户的视线范围内,可见极大提高了用户体检.触发的动作有很多,如鼠标点击,拉动页面滚动条,鼠标经过等等. [一] 图片按需加载 <img src="伪装的图片" width="990" height="90" data-src="http://dummy

jQuery:实现图片按需加载的方法,当要显示内容的高度超过了页面的高度,按需加载,根据滚动条的位置来判断页面显示的内容

实现图片按需加载的方法,当要显示内容的高度超过了页面的高度,按需加载,根据滚动条的位置来判断页面显示的内容 这个类似于京东或淘宝页面,根绝页面的滚动,显示下面的内容 如下图所示,一开始并不是所有的图片都显示,当滚动条移动到页面最下面的时候,再显示下面的内容 解决思路:通过判断滚动条是否滚动到了页面的最下面,如果滚动到了页面的最下面,则重新加载图片 知识点:1.offset() 方法返回或设置匹配元素相对于文档的偏移(位置) 返回第一个匹配元素的偏移坐标. 该方法返回的对象包含两个整型属性:top

jQuery封装的轮播图组件(按需加载)

效果图 slider.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>slider</title> <link rel="stylesheet" href="../css/base.css"> <link rel="styles