<!DOCTYPE html>
<html lang="en" class="app">
<head>
<meta charset="utf-8"/>
<title>懒加载</title>
</head>
<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);
</script>
<style>
.demo img {
width: 736px;
height: 490px;
background: url(images/loading.gif) 50% no-repeat;
}
.lazy{
width: 500px;
height: 500px;
}
</style>
<body>
<div class="demo">
<img class="lazy" src="__STATIC__/leave/image/small.png" data-echo="__STATIC__/leave/image/big.jpg">
</div>
</body>
</html>
<script>
Echo.init({
offset: 0,//离可视区域多少像素的图片可以被加载
throttle: 0 //图片延时多少毫秒加载
});
</script>
232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
