Echo.js简单的JavaScript图像延迟加载库
发布时间：2017-10-16, 17:28:22 分类：HTML | 编辑 off 网址 | 辅助
正文 2924字数 279,966阅读
<style>
.demo img { width: 736px; height: 490px; background: url(https://out.img.pan.lizhenqiu.com/0567af09e1f85406e6f1d33515203973) 50% no-repeat;}
</style>
<div class="demo" style="width: 736px; margin: 0 auto;">
<img class="lazy" src="https://out.img.pan.lizhenqiu.com/0567af09e1f85406e6f1d33515203973" data-echo="https://out.img.pan.lizhenqiu.com/a09105417d53e21f80a742e54ee57fe8">
<img class="lazy" src="https://out.img.pan.lizhenqiu.com/0567af09e1f85406e6f1d33515203973" data-echo="https://out.img.pan.lizhenqiu.com/335f6a1be2aafc885e66e5a50b50b2ed">
<img class="lazy" src="https://out.img.pan.lizhenqiu.com/0567af09e1f85406e6f1d33515203973" data-echo="https://out.img.pan.lizhenqiu.com/19e1d8f5a7d29189a9a065cb3ad2e15a">
<img class="lazy" src="https://out.img.pan.lizhenqiu.com/0567af09e1f85406e6f1d33515203973" data-echo="https://out.img.pan.lizhenqiu.com/63cb979bc9373be3be88c03bc0120661">
<img class="lazy" src="https://out.img.pan.lizhenqiu.com/0567af09e1f85406e6f1d33515203973" data-echo="https://out.img.pan.lizhenqiu.com/e9858be90dd58f46ab29936eb08215d9">
<img class="lazy" src="https://out.img.pan.lizhenqiu.com/0567af09e1f85406e6f1d33515203973" data-echo="https://out.img.pan.lizhenqiu.com/c30777f7a58db36dc2282ea8b4f5af7e">
<img class="lazy" src="https://out.img.pan.lizhenqiu.com/0567af09e1f85406e6f1d33515203973" data-echo="https://out.img.pan.lizhenqiu.com/1d6a429c4e7d10a7fc4a8f2e3fff2745">
</div>
<script>
window.Echo=(function(window,document,undefined){'use strict';var store=[],offset,throttle,poll;var _inView=function(el){var coords=el.getBoundingClientRect();return((coords.top>=0&&coords.left>=0&&coords.top)<=(window.innerHeight||document.documentElement.clientHeight)+parseInt(offset));};var _pollImages=function(){for(var i=store.length;i--;){var self=store[i];if(_inView(self)){self.src=self.getAttribute('data-echo');store.splice(i,1);}}};var _throttle=function(){clearTimeout(poll);poll=setTimeout(_pollImages,throttle);};var init=function(obj){var nodes=document.querySelectorAll('[data-echo]');var opts=obj||{};offset=opts.offset||0;throttle=opts.throttle||250;for(var i=0;i<nodes.length;i++){store.push(nodes[i]);}_throttle();if(document.addEventListener){window.addEventListener('scroll',_throttle,false);}else{window.attachEvent('onscroll',_throttle);}};return{init:init,render:_throttle};})(window,document);
Echo.init({
offset: 0,
throttle: 0
});
</script>
Run code
Cut to clipboard
参数
Echo.init({
offset: 0,
throttle: 0
});Run code
Cut to clipboard
| 参数 | 说明 |
|---|---|
| offset | 离可视区域多少像素的图片可以被加载 |
| throttle | 图片延迟多少毫秒加载 |
（支付宝）给作者钱财以资鼓励 （微信）→
有过 1 条评论 »
首先需要找到被删元素的父元素，通过父元素将其需要删除的子元素删除。
var el = document.getElementById('div2js'); el.parentNode.removeChild(el);<script> $(".easyzoom img").each(function(){ var w=$(this).width(); var h=$(this).height(); var html='<div class="loadingimgcssdivback" style="background: url(data:image/gif;base64,R0lGODlhCgAKAJEDAMzMzP9mZv8AAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQFAAADACwAAAAACgAKAAACF5wncgaAGgJzJ647cWua4sOBFEd62VEAACH5BAUAAAMALAEAAAAIAAMAAAIKnBM2IoMDAFMQFAAh+QQFAAADACwAAAAABgAGAAACDJwHMBGofKIRItJYAAAh+QQFAAADACwAAAEAAwAIAAACChxgOBPBvpYQYxYAIfkEBQAAAwAsAAAEAAYABgAAAgoEhmPJHOGgEGwWACH5BAUAAAMALAEABwAIAAMAAAIKBIYjYhOhRHqpAAAh+QQFAAADACwEAAQABgAGAAACDJwncqi7EQYAA0p6CgAh+QQJAAADACwHAAEAAwAIAAACCpRmoxoxvQAYchQAOw==);width: '+w+'px;height: '+h+'px;background-repeat: no-repeat;background-position: center center;position: absolute;left: 0px;top: 0px;"></div>'; $(this).after(html); }); window.Echo=(function(window,document,undefined){'use strict';var store=[],offset,throttle,poll;var _inView=function(el){var coords=el.getBoundingClientRect();return((coords.top>=0&&coords.left>=0&&coords.top)<=(window.innerHeight||document.documentElement.clientHeight)+parseInt(offset));};var _pollImages=function(){for(var i=store.length;i--;){var self=store[i];if(_inView(self)){self.src=self.getAttribute('data-echo'); //console.log(self.nextSibling); self.parentNode.removeChild(self.nextSibling); //self.removeAttributeNode(self.nextSibling); //$(self).next('loadingimgcssdivback').remove(); store.splice(i,1);}}};var _throttle=function(){clearTimeout(poll);poll=setTimeout(_pollImages,throttle);};var init=function(obj){var nodes=document.querySelectorAll('[data-echo]');var opts=obj||{};offset=opts.offset||0;throttle=opts.throttle||250;for(var i=0;i<nodes.length;i++){store.push(nodes[i]);}_throttle();if(document.addEventListener){window.addEventListener('scroll',_throttle,false);}else{window.attachEvent('onscroll',_throttle);}};return{init:init,render:_throttle};})(window,document); Echo.init({ offset: 0, throttle: 0 }); </script>